MVC Ajax.BeginForm JavaScript parameters

Question

I have an AJAX form where the url id needs to be from JavaScript

@using(Ajax.BeginForm("Add","Comments", new { ArticleID = 3 }, new AjaxOptions { UpdateTargetId="Comments"}))

Where ArticleID = 3 should be replaced so that the ArticleID value is set equal to the result of a called Javascript function. Something like

JS:

function GetArticleID()
{
      return 3;
}

Razor:

@using(Ajax.BeginForm("Add","Comments", new { ArticleID = GetArticleID() }, new AjaxOptions { UpdateTargetId="Comments"}))

Controller:

public ActionResult Add(int ArticleID, Comment model)
{

}

How can I use JavaScript function result as BeginForm parameter?

How can i use javacript function result as BeginForm parameter? — Tomasz
– Tomasz, Commented Jul 16, 2016 at 22:17
Add that to your question so the users can understand it better. — Nirupa
– Nirupa, Commented Jul 16, 2016 at 22:17

Shyju · Accepted Answer · 2016-07-16 22:22:35Z

The line @using(Ajax.BeginForm(" will be executed by razor on server. At that time it does not have any knowledge of the javascript methods in your client browser. So you cannot mix a javascript function there.

I prefer to write clean custom code to do the ajax form submit (instead of using Ajax.BeginForm) because it allows me to customize any way i want.

Keep your form as a normal form.

@using(Html.BeginForm("Add","Comments"))
{
   <input type="hidden" name="ArticleId" id="ArticleId" value=""/>
   <input name="CommentText" type="text" />
   <input type="submit" id="saveCmntBtn" />
}

Now listen to the click event of the submit button. Assign the ArticleId value to the input field, get the serialized version of the form and post to server. You may use jQuery serialize() method to get the serialized version of your form.

$(function(){

  $("#saveCmntBtn").click(function(e){
     e.preventDefault();
     $("#ArticleId").val(GetArticleID());
     var f=$(this).closest("form");
     $.post(f.attr("action"),f.serialize(),function(res){
       $("#Comments").append(res);
     });
  });

});

Collectives™ on Stack Overflow

MVC Ajax.BeginForm JavaScript parameters

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related