mvc PartialView with Dialog Partial View顯示html

Question

我想要做的是打開一個jquery對話框。 發生的事情是，當我嘗試打開PartialView時，我看到以下html文本與表單的呈現：

     <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>

這是控制器動作：

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

這是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" />
   }

這是我的ajax調用的樣子：

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

回顧一下，ajax調用確實到達ActionResult，但不確定它何時嘗試顯示部分視圖，它顯示HTML與渲染的html。

Answer 1

這里的問題是你正在嘗試加載尚未渲染到對話框的innerHTML中的剃刀視圖。 相反，您應該做的是在創建對話框時將對話框的href屬性設置為URL.Action鏈接。 請參閱以下鏈接以獲取示例。

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

另一個選項，它不是可維護的IMO，但它將以您當前的方式工作，是從操作方法返回原始HTML。

我認為第一種解決方案更好，因為控制器沒有被HTML字符串連接污染。

Answer 2

jQuery不允許你在.html()使用腳本。 你可以通過兩種方式做到這一點：

相反，原生DOM HTML注入：

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

。

或者，將其設置為數據屬性並手動加載：

在視圖中：

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

在JS中：

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

參考： http ： //api.jquery.com/jQuery.getScript/

。

另一種方法是使用load方法，如：

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

參考： http ： //api.jquery.com/load/

。

在jQuery驗證的情況下，我會考慮將其添加到父頁面本身。 您希望它可以在相當多的情況下使用。