Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>There are a couple of issues with your code:</p> <ul> <li>You are using a wrong overload of the Html.BeginForm method. In the overload you used the <code>id</code> is a route value, not HTML attribute</li> <li>Inside your .submit callback you are not canceling the default action by returning false and thus when the form is submitted the AJAX call will hardly have any time to execute before the browser redirects away from the page</li> <li>In the data parameter of the AJAX call you are passing a jQuery object representing the form called <code>formCollection</code> when you should be serializing the data. </li> <li>You have broken markup => there's one closing div that doesn't have a corresponding opening element.</li> </ul> <p>So let's start by fixing the markup first:</p> <pre><code>&lt;% using (Html.BeginForm(null, null, FormMethod.Post, new { id = "some-form" })) { %&gt; &lt;div id="TestDiv"&gt; &lt;div id="Title"&gt;Test&lt;/div&gt; &lt;div id="CheckIn"&gt; Check-in:&lt;br /&gt; &lt;%= Html.TextBox("FromDate", "", new { id = "DateFrom", style = "width:190px" }) %&gt; &lt;/div&gt; &lt;div id="CheckOut"&gt; Check-out:&lt;br /&gt; &lt;%= Html.TextBox("ToDate", "", new { id = "DateTo", style = "width:190px" }) %&gt; &lt;br /&gt; &lt;/div&gt; &lt;div id="newView"&gt;&lt;/div&gt; &lt;input type="submit" value="Search" /&gt; &lt;/div&gt; &lt;% } %&gt; </code></pre> <p>and then the script that will AJAXify the form:</p> <pre><code>$(function () { $('#some-form').submit(function () { $.ajax({ type: this.method, url: this.action, data: $(this).serialize(), success: function (result) { $('#newView').html(result); }, error: function (request, status, error) { alert('Oh no!'); } }); return false; }); }); </code></pre> <p>Now you should ensure that the corresponding POST controller action is successfully invoked and the parameters passed correctly. Also ensure that no errors occur inside this controller action and while rendering the partial view. Use a javascript debugging tool such as FireBug to see exactly what request/response are being sent as well as any possible js errors.</p>
 

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