Question

你好我们面临的问题我无法理解这个问题是什么我使用jquery ajax调用渲染局部视图以获取部分html并将其附加到主页面但是有奇怪的事情发生它返回完整的主页面html而不是仅仅部分视图html当然每次点击都会产生jquery事件dublicat我的主页中的所有控件

我想与你分享我的代码我可以解释为什么会发生这种情况以及如何解决它该页面是模型呼叫人员模型的多插入

主页Razor代码

 @model IEnumerable<Overtime.Models.staffmodel>

<div class="row">

    <div class="col-xs-12">

        @using (Html.BeginForm())
        {


            <div id="mytblcontainer">
                    @foreach (var item in Model)
                    {


                        Html.RenderPartial("_Create2", item);


                    }
                </div>




        }
        <i class="fa fa-plus-square add" id="addItem"></i>

        <br />
        <p>
            <input type="submit" value="أضافة" class="btn btn-primary btn-lg" />

        </p>
        <div class="pull-left back">
            @Html.ActionLink("العودة الى الرئيسية", "Index")
            <i class="fa fa-arrow-circle-o-left"></i>
        </div>

    </div>

</div>

部分视图剃刀代码

  @model Overtime.Models.staffmodel

@using Overtime.Helpers


@using (Html.BeginCollectionItem("staff"))
{
    <div class="EditRow">
        الأسم :
        @Html.TextBoxFor(model => model.staffName, new { @class = "form-control" })


        الترتيب :
        @Html.TextBoxFor(model => model.staffOrder, new { @class = "form-control" })



        <i class="fa fa-times eleremove   faa-wrench animated-hover animated-hover"></i>
    </div>



}

局部视图控制器

  public PartialViewResult BlankEditorRow()
        {
            return PartialView("_Create2", new staffmodel());
        }

Jquery

$("#addItem").click(function (e) {

    e.preventDefault();
    $.ajax({
        url: "Create/BlankEditorRow",
        cache: false,
        success: function (html) {
            alert(html);
            $('#mytblcontainer').append(html);
        }

    });
    return false;
});

BeginCollectionItem自定义html助手

public static class HtmlPrefixScopeExtensions
{
    private const string idsToReuseKey = "__htmlPrefixScopeExtensions_IdsToReuse_";

    public static IDisposable BeginCollectionItem(this HtmlHelper html, string collectionName)
    {
        var idsToReuse = GetIdsToReuse(html.ViewContext.HttpContext, collectionName);
        string itemIndex = idsToReuse.Count > 0 ? idsToReuse.Dequeue() : Guid.NewGuid().ToString();

        // autocomplete="off" is needed to work around a very annoying Chrome behaviour whereby it reuses old values after the user clicks "Back", which causes the xyz.index and xyz[...] values to get out of sync.
        html.ViewContext.Writer.WriteLine(string.Format("<input type=\"hidden\" name=\"{0}.index\" autocomplete=\"off\" value=\"{1}\" />", collectionName, html.Encode(itemIndex)));

        return BeginHtmlFieldPrefixScope(html, string.Format("{0}[{1}]", collectionName, itemIndex));
    }

    public static IDisposable BeginHtmlFieldPrefixScope(this HtmlHelper html, string htmlFieldPrefix)
    {
        return new HtmlFieldPrefixScope(html.ViewData.TemplateInfo, htmlFieldPrefix);
    }

    private static Queue<string> GetIdsToReuse(HttpContextBase httpContext, string collectionName)
    {
        // We need to use the same sequence of IDs following a server-side validation failure,  
        // otherwise the framework won't render the validation error messages next to each item.
        string key = idsToReuseKey + collectionName;
        var queue = (Queue<string>)httpContext.Items[key];
        if (queue == null)
        {
            httpContext.Items[key] = queue = new Queue<string>();
            var previouslyUsedIds = httpContext.Request[collectionName + ".index"];
            if (!string.IsNullOrEmpty(previouslyUsedIds))
                foreach (string previouslyUsedId in previouslyUsedIds.Split(','))
                    queue.Enqueue(previouslyUsedId);
        }
        return queue;
    }

    private class HtmlFieldPrefixScope : IDisposable
    {
        private readonly TemplateInfo templateInfo;
        private readonly string previousHtmlFieldPrefix;

        public HtmlFieldPrefixScope(TemplateInfo templateInfo, string htmlFieldPrefix)
        {
            this.templateInfo = templateInfo;

            previousHtmlFieldPrefix = templateInfo.HtmlFieldPrefix;
            templateInfo.HtmlFieldPrefix = htmlFieldPrefix;
        }

        public void Dispose()
        {
            templateInfo.HtmlFieldPrefix = previousHtmlFieldPrefix;
        }
    }
}

先谢谢，希望有些人告诉我为什么会发生这种情况

Answer 1

在局部视图中，您的布局必须为null;

制作

@{
        Layout = null;
}

Answer 2

我终于明白我在jQuery中犯了什么错误

$("#addItem").click(function (e) {

    e.preventDefault();
    $.ajax({
        url: "Create/BlankEditorRow",
        cache: false,
        success: function (html) {
            alert(html);
            $('#mytblcontainer').append(html);
        }
    });
    return false;
});

该URL返回表示所有创建页面及其html的create动作我应该

$("#addItem").click(function (e) {

    e.preventDefault();
    $.ajax({
        url: "BlankEditorRow",
        cache: false,
        success: function (html) {
            alert(html);
            $('#mytblcontainer').append(html);
        }
    });
    return false;
 });

仅返回我的部分视图操作

使用jquery ajax渲染局部视图给我整页html

主页Razor代码

2 个答案: