我在谷歌上搜索并引用了许多博客,但我没有成功通过 Ajax 在 Jquery Modal 中弹出 Partial View。
这是主视图的代码:
<%@ 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" />
<input type="submit" value="Cancelled" id="cancelled" name="button" />
<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);
}
}