mvc PartialView with Dialog Partial View显示html

Question

What I am trying to do is to open up a jquery dialog. What is happening is that I see the following html text vs the rendering of the form when it tries to open up the 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 looks like for the PartialView:

    @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" />
   }

This 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 recap, the ajax call does reach the ActionResult but not sure when it tries to show the partial view it shows HTML vs the rendered html.

Answer 1

The issue here is that you are trying to load razor view which has not been rendered into the dialog's innerHTML. Instead what you should be doing is setting href property of the dialog to the URL.Action link, when creating the dialog. See the link below for an example.

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

The other option, which is not very maintainable IMO, but which will work with way you are currently doing, is to return the raw HTML from the action method.

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

Answer 2

jQuery won't let you use a script inside .html() . You can do this by two ways:

Native DOM HTML injection instead:

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

.

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

In view:

     <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); };

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

.

Another way is use the load method, as in:

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

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

.

In the very case of jQuery validation, I'd consider adding it to the parent page itself. You'd expect it to be used in fair number of situations.