1

私はグーグルで検索し、多くのブログを参照しましたが、Ajaxを介してJqueryモーダルでパーシャルビューをポップアップすることに成功していません。

メインビューのコードは次のとおりです。

<%@ 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);
  }
}
4

1 に答える 1

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);
  }
}
于 2013-04-12T22:21:36.780 に答える