Resorts.aspx

Question

我有Resorts.aspx，它通过Ajax将ResortProducts.ascx中的内容加载到div中。

Resorts.aspx

<script type="text/JavaScript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js">
</script>

    <script type="text/javascript">

        $(function () {
            // View Resort Rates >>
            $('.ViewResortRatesLink').click(function () {
                var sID = getQueryStringParameterByName("sID", this.href);
                sID = sID.replace("~", "");
                renderCart("div" + sID, "Loading Resort Product Information...");
                $.ajax({
                    url: this.href,
                    success: function (result) {
                        renderCart("div" + sID, result)
                    }
                });
                return false;
            });
        });

        function renderCart(container, data) {
            $("#" + container).html(data);
        }

以下是在jQuery上触发的ActionLink代码：

                        <%= Html.ActionLink(
                                    "View Resort Rates >>",
                                    "ResortProducts", 
                                    "Resorts",
                                    new { sID = _supplier.SupplierID },
                                    new { @class = "ViewResortRatesLink" })%>

这是Div：

<div id="div<% =ResortSupplierID %>"></div>

ResortProducts.ascx加载度假村产品列表，每个产品都包含自己的表格，使用该表格可以将产品添加到购物车中。

ResortProducts.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<TrlSite.Services.ViewModels.ResortsView>" %>
<script type="text/JavaScript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js">
</script>
   <script type="text/javascript">
        $(function () {
            //+ Add to cart
            $(".addProductToCartForm").submit(function (e) {
                e.preventDefault();
                var HiddenCartForm = {
                    SupplierID: $(this.hSupplierID).val(),
                    Code: $(this.hProductCode).val(),
                };
                $.post($(this).attr("action"), HiddenCartForm, function (data) {
                    renderCart("rightColumn", data)
                });
                return false; // form already submitted using ajax, don't submit it again the regular way 
            });
        });

        function renderCart(container, data) {
            $("#" + container).html(data);
        } 
    </script>

<% foreach (var _supplier in Model.resorts) { %>
<table width="100%" cellpadding="2" cellspacing="0" id="tb_PAL">
    <tr>
        <td colspan="2" width="15%">&nbsp;</td>
        <td colspan="2">
            <table width="100%" cellpadding="2" cellspacing="0" border="0" style="table-layout:fixed;">
                <tr>
                    <td colspan="6"><hr /></td>
                </tr>
                <tr style="font-weight:bold;">
                    <td>ROOM TYPE</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td align="center">PRICE</td>
                </tr>
                <tr>
                    <td colspan="6"><hr /></td>
                </tr>
                <% 
                    foreach (var _product in products)
                    { %>
                    <tr>
                        <td colspan="2" align="left" valign="top"><% = _product.Description %></td>
                        <td  align="left">
                            <% using (Html.BeginForm("AddToCart", "ShoppingCart", FormMethod.Post, new { @class = "addProductToCartForm" }))
                                { %>
                                <input type="hidden" name="hSupplierID" id="hSupplierID" value="<% = _supplier.SupplierID %>" />
                                <input type="hidden" name="hProductCode" id="hProductCode" value="<% = _product.Code %>" />
                                <input type="submit" value="+ Add to cart" />
                            <% } %>
                        </td>
                        <td valign="top" align="center">
                            <span id="roomprice_" onclick="return false;" style="text-decoration:none;cursor:default;color:#000000">
                                $<% = _product.TotalPrice %>
                            </span>
                        </td>
                    </tr>
                <% } %>    
                <tr >                       
                    <td colspan="4">
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td colspan="5"><hr /></td>
    </tr>                   
</table>
<% } %>

可能有多个“View Resort Rates＆gt;＆gt;”在Resorts.aspx中链接，点击每个链接将加载包含相应产品列表的ResortProducts.ascx。如果我在Resorts.aspx中只加载一次ResortProducts.ascx并点击提交按钮一切正常。它发布一次表单。但是如果我多次加载.ascx，那么表单会被提交次数.ascx被加载。我该如何解决这个问题？当我提交表格时，它应该只发布一次，同时我应该能够发布多个表格。

Answer 1

我没有对此进行过测试，我相信如果你多次添加这个控件，那么javascript部分也会被多次创建。检查是否正在发生，如果是，那么我认为最好的方法是将javascript部分放在自己的js文件中，然后在包含控件的页面中引用一次javascript文件。我希望这会有所帮助。

Answer 2

<强>更新

我刚刚在最初发表的评论中读到了相同的答案......

我知道这篇文章已经老了，但我遇到了类似的问题。首先，我使用的是.NET 3.5，MVC 2.0，jQuery 1.8，bootstrap 2.0。我引用的局部视图实际上是一个用户控件（ascx），表示一个带有几个字段的表单和作为模态对话框打开的验证。

其次，这就是我所做的：

我将局部视图（用户控件）的javascript文件移动到父视图，因为即使只调用一次局部视图也会多次调用它。
但是，部分视图中的jQuery绑定停止工作，因为javascript是在加载部分视图的内容之前执行的。
我找到的解决方案是修改绑定类型以使用jQuery实时绑定，并且它有效。

我希望它会帮助别人！

ASP.NET MVC表单通过.ascx＆amp; ajax多次提交

Resorts.aspx

ResortProducts.ascx

2 个答案: