Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>OK, the code bits contained in your question are absolutely insufficient to draw any conclusions. So let's do a full example.</p> <p>Model:</p> <pre><code>public class MyViewModel { public string Foo { get; set; } } </code></pre> <p>Controller:</p> <pre><code>public class HomeController : Controller { public ActionResult Index() { return View(new MyViewModel()); } [HttpPost] public ActionResult Index(MyViewModel model) { // TODO : process the model ... return Json(new { Result = "Success" }); } } </code></pre> <p>View:</p> <pre><code>&lt;% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "myForm" })) { %&gt; &lt;%= Html.LabelFor(x =&gt; x.Foo) %&gt; &lt;%= Html.EditorFor(x =&gt; x.Foo) %&gt; &lt;input type="submit" value="Save" /&gt; &lt;% } %&gt; </code></pre> <p>External javascript to unobtrusively AJAXify the form:</p> <pre><code>$(function () { $('#myForm').submit(function () { $.ajax({ url: this.action, type: this.method, data: $(this).serialize(), success: function (data) { var message = data.Result; $('#Result').html(message); } }); return false; }); }); </code></pre> <p>Things to notice:</p> <ul> <li>I am attaching the <code>.submit</code> event to the if of the form (<code>#myForm</code>), whereas in your example you are using <code>#BtnName</code> which looks a strangely suspicious name for a form. Unfortunately you haven't shown your markup so we don't know what it actually represents</li> <li>I am no longer hardcoding the url of the form (<code>Home/Index</code>) but relying on the one generated by the <code>Html.BeginForm</code>. There are two benefits of this: 1. youcan now put your javascript into a separate file => you are no longer mixing markup and script and your HTML pages now become smaller and faster to load (the external static javascript files are cached) and 2. when you deploy your application on some other server or you decide to change your routes it will still work without any modification on your js.</li> <li>I am no longer using <code>contentType: 'application/json'</code> because when you use <code>$(this).serialize()</code> this doesn't serialize the form into JSON. It serializes it into a <code>application/x-www-form-urlencoded</code> style. So you are basically introducing a contradiction: you are telling the server that you will send a JSON request but in practice you don't.</li> <li>I have removed the <code>async: false</code> attribute as this does a synchronous request and freezes the browser during its execution. It is no longer AJAX. So unless you want this, don't use it.</li> <li>I have removed the <code>dataType: 'json'</code> parameter as jQuery is intelligent enough to deduce this from the actual response <code>Content-Type</code> header and automatically parse the returned JSON and pass it to the success callback as a javascript object that you could directly use.</li> </ul>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload