無法通過Ajax彈出Jquery Modal中的部分視圖

Question

我已經在谷歌上搜索出來並引用了許多博客，但我沒有通過Ajax在Jquery Modal中彈出部分視圖獲得成功。

這裏是主視圖代碼：

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ApricaCRMEvent.Models.CRM.DatabaseEntities.Third_Party_Assistance>" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> 
</asp:Content> 
<asp:Content ID="Head" ContentPlaceHolderID="HeadContent" runat="server"> 
    <script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script> 
    <script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script> 
    <script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" 
     type="text/javascript"></script> 
    <script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script> 
    <script src="../../Scripts/MicrosoftMvcValidation.debug.js" type="text/javascript"></script> 
</asp:Content> 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
    <!-- for datepicker --> 
    <link rel="stylesheet" href="../../jquery-ui-1.8.17.custom/development-bundle/themes/base/jquery.ui.all.css"> 
    <script type="text/javascript" src="../../jquery-ui-1.8.17.custom/development-bundle/jquery-1.7.1.js"></script> 
    <script type="text/javascript" src="../../jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.core.js"></script> 
    <script type="text/javascript" src="../../jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.widget.js"></script> 
    <script type="text/javascript" src="../../jquery-ui-1.8.17.custom/development-bundle/ui/jquery.ui.datepicker.js"></script> 
    <link rel="stylesheet" href="../../jquery-ui-1.8.17.custom/development-bundle/demos/demos.css"> 
    <script type="text/javascript"> 
     $(function() { 
      $("#Cheque_Date,#Sent_On,#Docket_Date,#Executed_Date,#Payment_Date").datepicker 
      ({ 
       dateFormat: "dd/mm/yy", 
       changeMonth: true, 
       changeYear: true, 
       showButtonPanel: true 
      }); 
     }); 

     $(function() { 
      $('a#addInvoiceDetail').click(function() { 
       $('#dialog-form').load("/CRMService/Add_CRM_Invoice", function() { 
        $(this).dialog({ show: 'fade', hide: 'fade' }); 
        bindForm(this); 

       }); 
       return false; 
      }); 
     }); 
     function bindForm(dialog) { 
      $('form', dialog).submit(function() { 
       $.ajax({ 
        url: "/CRMService/Add_CRM_Invoice", 
        type: this.method, 
        data: $(this).serialize(), 
        success: function (result) { 
         if (result.success) { 
          alert('Invoice Added Successfully'); 
          $('#dialog-form').dialog('close'); 
         } else { 
          $('#dialog-form').html(result); 
          bindForm(); 
         } 
        } 
       }); 
       return false; 
      }); 
     } 

    </script> 

    <% using (Html.BeginForm()) 
     { %> 
    <%: Html.ValidationSummary(true) %> 
    <fieldset> 
     <legend>Edit Third Party Assistance</legend> 
     <div id="Parts"> 
      <div id="Part1"> 
       <table id="entry"> 
        <tr> 
         <th> 
          <%: Html.LabelFor(model => model.Service_Id) %> 
         </th> 
         <td> 
          <%: Html.DisplayFor(model => model.Service_Id) %> 
         </td> 
        </tr> 
        <tr> 
         <th> 
          <%: Html.LabelFor(model => model.CRM_Doctor_Request_Id) %> 
         </th> 
         <td> 
          <%: Html.DisplayFor(model => model.CRM_Doctor_Request_Id)%> 
         </td> 
        </tr> 
        <tr> 
         <th> 
          Bank 
         </th> 
         <td> 
          <%: Html.DropDownList("ddlBankList", (SelectList)ViewData["bankList"] as SelectList, "--Select Bank--", new { onchange = "FillBankDetail();" })%> 
          <%: Html.HiddenFor(model => model.Bank_Detail_Id)%> 
         </td> 
        </tr> 
      <tr> 
       <th> 
        <%: Html.LabelFor(model => model.Amount) %> 
       </th> 
       <td> 
        <%: Html.EditorFor(model => model.Amount) %> 
       </td> 
      <tr> 
       <th> 
        <%: Html.LabelFor(model => model.Courier_Charge)%> 
       </th> 
       <td> 
        <%: Html.EditorFor(model => model.Courier_Charge)%> 
       </td> 
      </tr> 
         <th> 
          <%: Html.LabelFor(model => model.Is_Deleted) %> 
         </th> 
         <td> 
          <%: Html.DisplayFor(model => model.Is_Deleted) %> 
         </td> 
        </tr> 
        <tr> 
         <th> 
          <%: Html.LabelFor(model => model.Is_Cancellation_Charge) %> 
         </th> 
         <td> 
          <%: Html.DisplayFor(model => model.Is_Cancellation_Charge)%> 
         </td> 
        </tr> 
       </table> 
      </div> 
      <div id="Part2"> 
       <p> 

      <input type="button" id="addInvoiceDetail" Value="Add Invoice Detail"/> 
        </p> 
      </div> 
      <%: Html.HiddenFor(model => model.urlPath) %> 
     </div> 
     <br /> 
     <div> 
      <input type="submit" value="Save" id="save" name="button" />&nbsp; 
      <input type="submit" value="Cancelled" id="cancelled" name="button" />&nbsp; 
      <input type="button" id="addInvoiceDetail" Value="Add Invoice Detail"/> 
     </div> 
    </fieldset> 
    <div id="dialog-form"></div> 
    <% } %> 

</asp:Content> 

這裏是PartialView的代碼：_Add_Invoice_Detail

<%using (Ajax.BeginForm(new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "addInvoiceDetail" })) 
{%> 
<%: Html.ValidationSummary(true) %> 
<fieldset> 
<legend>Invoice</legend> 
<table id="entry"> 
    <tr> 
     <th> 
      <%: Html.LabelFor(model => model.Vendor_Name)%> 
     </th> 
     <td> 
      <%: Html.EditorFor(model => model.Vendor_Name)%> 
     </td> 
    </tr> 
    <tr> 
     <th> 
      <%: Html.LabelFor(model => model.Payment_Date)%> 
     </th> 
     <td> 
      <%: Html.EditorFor(model => model.Payment_Date)%> 
     </td> 
    </tr> 
</table> 
<p> 
    <input type="submit" value="Save" /> 
</p> 
</fieldset> 
<%}%> 

操作方法：

public ActionResult Add_CRM_Invoice() 
{ 
    Invoice model = new Invoice(); 
    if (Request.IsAjaxRequest()) 
    { 
    return PartialView("_Add_CRM_Invoice",model); 
    } 
    else 
    { 
    return View("Add_CRM_Invoice",model); 
    } 
} 

Answer 1

更改操作方法：

public ActionResult Add_CRM_Invoice() 
{ 
    Invoice model = new Invoice(); 
    if (Request.IsAjaxRequest()) 
    { 
    return PartialView("_Add_Invoice_Detail",model); 
    } 
    else 
    { 
    return View("Add_CRM_Invoice",model); 
    } 
}