ASP.NET 使用 @Ajax.JavascriptEncode 和 insertBefore() 插入部分视图 jQuery：生成双引号

Question

我以一种更明确的方式更新我的最后一个问题。

有人知道这是为什么吗?

$(document).ready(function () {
    $('#inner').click(function () {
        $('<div class="dropHere">@Ajax.JavaScriptStringEncode(Html.Partial("EditorAddInvoiceDetailsPartial").ToHtmlString()) </div>').insertBefore('#inner');
    });
});

生成我的局部视图，在它们最初是简单的地方使用双引号(在partialview.cshtml中)。插入看起来像这样:

<fieldset id="productDetails">
    <legend>Details</legend>
    <div class="dropHere">
        <div class=""editor-label""> Product: </div>
        <div class=""editor-field"">
            <select id=""ProductId"" class=""ProductId"" name=""ProductId"">
                <option value=""""></option>
                <option value=""1"">Samsung</option>
                <option value=""2"">Seagate</option>
                <option value=""3"">OCZ</option>
                <option value=""4"">Asus</option>
                <option value=""5"">HP</option>
            </select>
        </div>
        <div class=""editor-label""> Price: </div>
        <div class=""editor-field"">
        <div class=""editor-label""> Tax: </div>
        <div class=""editor-field"">
        <div class=""editor-label""> Quantity: </div>
        <div class=""editor-field"">
        <div class=""editor-label""> Subtotal Excl.VAT: </div>
        <div class=""editor-field"">
        <div class=""editor-label""> Subtotal VAT: </div>
        <div class=""editor-field"">
        </div>
    </div>
</fieldset>

我试图找到一些解决方案，但没有相关的。这是可能的修复，或者最好找到一个新的方式来插入我的部分视图在这里。

Answer 1

我将如何做到这一点，首先我将把这两个事件在相同的.ready()函数。另外，我猜有一个div外面的。changeProductPrice，让我们称之为。wrapper，你的例子中的问题可能是，你添加的事件为初始。changeProductPrice，然后当你添加一个新的，它覆盖它，并得到很多，在我的例子中，我添加了直播事件的父母所以当一个新的，它被添加它不会丢失，但它附加到他们的孩子(changeProductPrice)。我要解释一下吗?

<script> 
    $(document).ready(function () {
    var index = 2;
    $('#inner').on('click', function () {

        $('<div data-index="' + index + '" class="changeProductPrice"><div class="editor-label"> Product: </div> <div class="editor-field">@Ajax.JavaScriptStringEncode(Html.DropDownList("ProductId",(IEnumerable<SelectListItem>)ViewBag.ProductId, "",  new { @class = "ProductId"}).ToHtmlString())</div><div class="editor-label">Price:</div><div class="editor-field"><input class="productprice" value="" /></div></div><div class="editor-label">Tax:</div><div class="editor-field">@Ajax.JavaScriptStringEncode(@Html.DropDownList("TaxId", (IEnumerable<SelectListItem>)ViewBag.TaxId, "", new { @class = "producttax" }).ToHtmlString())</div><div class="editor-label">Quantity:</div><div class="editor-field"><input class="productquantity" name="Qtn" value="" /></div>').insertBefore("#inner");
        index++;
    });
    $('.wrapper').on('change', '.changeProductPrice', function () {
        var url = '@Url.Action("SortPrices", "Invoice", null)';
        var ProductId = $(this).val();
        var el = $(this);
        $.ajax({
            url: url,
            type: 'GET',
            cache: false,
            data: { id: ProductId },
            success: function (result) {
                 el.parent().parent().find('.productprice').val(result);
                 el.parent().parent().find('.productprice').change();
                }
            });
        });
    });
</script>

Answer 2

与其通过该字符串构建部分，为什么不直接使用Ajax通过控制器动作来呈现部分呢?

$('#drophere').load('/Editor/InvoiceDetails');

这样，如果需要的话，您也可以很容易地为部分视图构建模型服务器端。