Databases
StackOverflow2013
Postsdbo
POSubmitting an Ajax.BeginForm form with javascript/jquery still returning partialview as full page with MVC3
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSubmitting an Ajax.BeginForm form with javascript/jquery still returning partialview as full page with MVC3
    primarykey
    data
    text
    <p>(<em>Note</em>: updated after original post - solution at bottom)</p> <p><strong>The problem:</strong></p> <p>I'm using MVC3 and have created a partial view with a Telerik ComboBox using Ajax.BeginForm and I'm then trying to submit it using a javascript handler attached to the ComboBox as a client event.</p> <p>However, whenever it submits and gets to the Controller, Request.IsAjaxRequest() is returning false and so it isn't being treated as an ajax request. If I add in a separate submit button and submit the form using that then in the Controller, Request.IsAjaxRequest() returns true.</p> <p>The result at the moment is that my PartialView is being returned as a full page rather than replacing the necessary div. With reference to the source below it is the BUserControl that is being returned from the Controller but as a full page.</p> <p>I've also tried with a non-Telerik DropDownList and got the same result.</p> <p>If someone can identify what might be wrong, I would be very grateful.</p> <p>Here's the Razor page that holds the partial views:</p> <pre><code>@inherits ABC.DEF.Site.ViewClasses.ViewModelView&lt;ABC.DEF.Site.Models.ViewModel&gt; @{ ViewBag.Title = "DEF - View Creation"; } &lt;div class="editor-label"&gt; @Html.Label("System", "System") &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.Partial("AUserControl", Model) &lt;/div&gt; &lt;div class="editor-label"&gt; @Html.Label("Type", "Type") &lt;/div&gt; &lt;div class="editor-field" id="B"&gt; @Html.Partial("BUserControl", Model) &lt;/div&gt; </code></pre> <p>Here's the Partial view for the the AUserControl</p> <pre><code>@inherits ABC.DEF.Site.ViewClasses.ViewModelView&lt;ABC.DEF.Site.Models.ViewModel&gt; @using (Ajax.BeginForm("LoadB", "View", new AjaxOptions { UpdateTargetId = "B" })) { @(Html.Telerik().ComboBoxFor(m =&gt; m.SelectedA) .BindTo(new SelectList(GetExistingViewData.As, "Id", "DisplayName")) .HtmlAttributes(new { style = string.Format("width:{0}px", 500) }) .ClientEvents(events =&gt; events.OnChange("onSelectedAChange")) ) } &lt;script type="text/javascript"&gt; function onSelectedAChange() { $(this).parents('form').submit(); } &lt;/script&gt; </code></pre> <p>Here's the partial view for the BUserControl (note that it refers to a "C" div which I've purposely left out of the Razor page above in this post for conciseness):</p> <pre><code>@inherits ABC.DEF.Site.ViewClasses.ViewModelView&lt;ABC.DEF.Site.Models.ViewModel&gt; @using (Ajax.BeginForm("LoadC", "View", new AjaxOptions { UpdateTargetId = "C" })) { @(Html.Telerik().ComboBoxFor(m =&gt; m.SelectedB) .BindTo(new SelectList(GetExistingViewData.GetBs(Model.SelectedA), "Id", "DisplayName" )) .HtmlAttributes(new { style = string.Format("width:{0}px", 500) }) .ClientEvents(events =&gt; events.OnChange("onSelectedBChange")) ) } &lt;script type="text/javascript"&gt; function onSelectedBChange() { $(this).parents('form').submit(); } &lt;/script&gt; </code></pre> <p>And finally, here's the Controller function that gets called when the Combo in the AUserControl gets changed:</p> <pre><code> [HttpPost] public ActionResult LoadBs(ViewModel model) { PartialViewResult res = PartialView("BUserControl", model); return res; } </code></pre> <p>It's in this Controller function that if I type Request.IsAjaxRequest() in the immediate window it return false.</p> <p>The things I've checked (as suggested many times elsewhere are):</p> <ul> <li>I've included the jquery.unobtrusive-ajax.min.js file in my _Layout.cshtml</li> <li>I've included the key="UnobtrusiveJavaScriptEnabled" value="true" entry in the web.config for the site</li> <li>I'm not including the older MVCAjax js files</li> <li>Changing the page and partial views to have the @model tag at the top instead of the @inherits - that didn't have any effect</li> </ul> <p>These are suggestions such as in this <a href="https://stackoverflow.com/questions/265293/additional-jquery-events-submitting-my-ajax-beginform/8731174#8731174">similar question</a></p> <p>Other details:</p> <ul> <li>It's running on IIS 7, Windows 7 and the browser is IE8</li> <li>I have a separate sample project that is very similar and works fine and I can't see any major differences between the two.</li> </ul> <p><strong>-------- THIS IS NOW RESOLVED AS PER THE BELOW SOLUTION --------</strong></p> <p>Finally resolved this after two days - posting back so that if others have the same problem it will help them!</p> <p>In our _Layout.cshtml page we include the following line in the head section to include the jQuery library:</p> <pre><code>&lt;script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"&gt;&lt;/script&gt; </code></pre> <p>But, because we're using the Telerik MVC controls we also had the following line in our _Layout.cshtml page:</p> <pre><code>@Html.Telerik().ScriptRegistrar(); </code></pre> <p>This registers the correct javascript includes for the Telerik controls.</p> <p>And by default this adds the following at the end of the page:</p> <pre><code>&lt;script src="@Url.Content("~/Scripts/2011.3.1115/jquery-1.6.4.min.js")" type="text/javascript"&gt; </code></pre> <p>This newer version of jquery (or having both included) is clearly causing problems with the ajax form submission asI then included this line in my other sample project (which was fully working) and it then broke.</p> <p>So, back to the main project - slightly altering the Telerik script registering line removes the default jQuery include and everything then works.</p> <pre><code>@Html.Telerik().ScriptRegistrar().jQuery(false); </code></pre> <p>The Controller is now recognising the submit as a proper Ajax postback and the partial view is coming back correctly.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. UStrembler2003
    plurals
    1. PL
      singulars
      1. LTLinked
    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. POSubmitting an Ajax.BeginForm form with javascript/jquery still returning partialview as full page with MVC3
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POSubmitting an Ajax.BeginForm form with javascript/jquery still returning partialview as full page with MVC3
      1. This table or related slice is empty.
      1. VTUpMod
    1. COUpvote for solving the problem yourself AND posting the solution.
      singulars
      1. POSubmitting an Ajax.BeginForm form with javascript/jquery still returning partialview as full page with MVC3
      1. USK. Bob
    2. COThanks @K.Bob - I've also posted a link to this over on the Telerik forums to let other Telerik users know.
      singulars
      1. POSubmitting an Ajax.BeginForm form with javascript/jquery still returning partialview as full page with MVC3
      1. UStrembler2003
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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