Geek Answers Handbook

Mvc PartialView with partial html dialog display

I am trying to open a jquery dialog. What happens is that I see the following html text and form visualization when I try to open PartialView:

<form action="/Plt/FileUpload" method="post"><input data-val="true" data-val-number="The field PlNum must be a number." data-val-required="The PlNum field is required." id="PlNum" name="PlNum" type="hidden" value="36028" /> <div id="errMsg" > </div> <p>File upload for Pl# 36028</p> <input type="file" name="file" /> <input type="submit" value="OK" /> </form>

Here is the controller action:

  public ActionResult FileUpload(int id) { var model = new FileUpload { PlNum = id }; return PartialView(model); }

This is what the view for PartialView looks like:

  @model Ph.Domain.Lb.Models.FileUpload <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
  @using (Html.BeginForm("FileUpload", "Plts", FormMethod.Post, null)) { @Html.HiddenFor(a => a.PlNum) <div id="errMsg" > @if (TempData["ErrMessage"] != null) { @TempData["ErrMessage"] } </div> <p>File upload for Pl# @Model.PlNum</p> <input type="file" name="file" /> <input type="submit" value="OK" /> }

Here is what my ajax call looks like:

  var url = '@Url.Action("FileUpload", "Plt")' + '?id=' + encodeURIComponent(rowid); $.ajax({ url: url, type: 'GET', success: function(result) { if (result.success) { $('#dialog').dialog('close'); } else { // refresh the dialog $('#dialog').html(result); } }

To repeat, the ajax call will actually reach the ActionResult, but not sure when it is trying to show a partial view that shows HTML and rendered html.

+4
source share
2 answers

The problem is that you are trying to load a razor view that was not displayed in the innerHTML dialog box. Instead, you should set the href property of the dialog for the URL.Action link when creating the dialog. See the link below.

http://www.matthidinger.com/archive/2011/02/22/Progressive-enhancement-tutorial-with-ASP-NET-MVC-3-and-jQuery.aspx

Another option that does not really support IMO, but which will work the way you are doing now, is to return the raw HTML from the action method.

I think the first solution is better because the controller is not contaminated with HTML string concatenation.

+1
source

jQuery will not allow you to use a script inside .html() . You can do this in two ways:

Instead of the original DOM HTML injection:

 $('#dialog')[0].innerHTML = result;

.

Or by setting it as a data attribute and loading it manually:

In sight:

  <form action="/Plt/FileUpload" ... data-script="@Url.Content("~/Scripts/jquery.validate.min.js")" ... />

In JS:

 $('#dialog').html(result); var dialogScript = $('#dialog').children().first().data("script"); if(!!dialogScript) { $.getScript(dialogScript); };

Link: http://api.jquery.com/jQuery.getScript/

.

Another way is to use the load method, for example:

 $("#dialog").load(url, null, function() { // on a side note, put $("#dialog") in a variable and reuse it $("#dialog").dialog(); });

Link: http://api.jquery.com/load/

.

In the case of jQuery validation, I would think about adding it to the parent page. You expect it to be used in enough situations.

0
source

More articles:


All Articles