render partialview using jquery ajax give me whole page html

Question

hello guys i am facing issue and i cant understand whats the problem i am rendering partial view using jquery ajax call to get the partial html and append it on the main page but there is strange thing happen its return full main page html not the partalial view html only and of course that make in each click for jquery event dublicat all controls in my main page

i'd like to share my code with u my u can explain why that happen and how i can fix it that page is a multi insertion for model call staff model

Main Page Razor code

 @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>

partial view razor code

  @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>



}

partial view Controller

  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 custom html helper

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

thanks in advanced and hope some body tell me why that happen

Answer 1

I finally understand where I made a mistake in jQuery

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

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

that URL return the create action which represent all create page with its html i should

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

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

to return only my partial view action

Answer 2

In your partial view your layout must be null;

make it

@{
        Layout = null;
}