ASP.NET MVC Форма загружается через .ascx и ajax отправляется несколько раз - PullRequest
1 голос
/ 19 апреля 2011

У меня есть Resorts.aspx, который загружает контент из ResortProducts.ascx в div через Ajax.

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

Вот код для ActionLink, который запускается выше jQuery:

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

Вот Div:

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

ResortProducts.ascx загружает список продуктов Resort, каждый продукт содержит свою собственную форму, с помощью которой продукт можно добавить в корзину.

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

В Resorts.aspx может быть несколько ссылок «Посмотреть цены курортов >>», при нажатии на каждую ссылку будет загружен файл ResortProducts.ascx, содержащий соответствующий список продуктов. Если я загружаю ResortProducts.ascx только один раз в Resorts.aspx и нажимаю кнопку подтверждения, все работает нормально. Он публикует форму один раз. Но если я загружаю .ascx несколько раз, то форма получает количество загрузок .ascx. Как я могу решить эту проблему? Когда я отправляю форму, она должна быть опубликована только один раз, и в то же время я могу разместить несколько форм.

Ответы [ 2 ]

1 голос
/ 19 апреля 2011

Я не проверял это, я считаю, что если вы добавите этот элемент управления несколько раз, то раздел javascript будет также создан несколько раз.Проверьте, происходит ли это, и если это так, то я считаю, что наилучшим способом было бы поместить раздел javascript в его собственный файл js, а затем ссылаться на файл javascript один раз на странице, которая будет содержать элементы управления.Надеюсь, это поможет.

0 голосов
/ 11 сентября 2012

Обновление

Я только что прочитал тот же ответ в комментариях к первоначальному сообщению ...


Я знаю, что это сообщение стареет, ноУ меня была похожая проблема.Во-первых, я использую .NET 3.5, MVC 2.0, jQuery 1.8, начальную загрузку 2.0.Частичное представление, на которое я ссылаюсь, на самом деле является пользовательским элементом управления (ascx), представляющим форму с несколькими полями и проверкой, которая открывается в виде модального диалога.

Во-вторых, вот что я сделал:

  • Я переместил файл javascript частичного представления (пользовательский элемент управления) в родительское представление, потому что он вызывался несколько раз даже при одном вызове частичного представления.
  • Но затем jQueryпривязки внутри частичного представления перестали работать, потому что javascript был выполнен до загрузки содержимого частичного представления.
  • Решение, которое я нашел, состояло в том, чтобы изменить типы привязки для использования живых привязок jQuery, и это сработало.

Я надеюсь, что это поможет кому-то еще!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...