How can I update the contents of a Tab using ajax in ASP.NET MVC 5?

1

I want to update the content of the TAB, by clicking the submit button, I update the whole page, not the content, can someone help me?

Thank you very much!

Controller PeticioUsuarisController:

  // POST: PeticioUsuaris/_Demanar
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult _Demanar([Bind(Include = "Nom,PrimerCognom,SegonCognom")] PeticioUsuari peticioUsuari)
        {
            if (ModelState.IsValid)
            {
                peticioUsuari.IdUsuariFaPeticio = 1;
                db.PeticioUsuari.Add(peticioUsuari);
                db.SaveChanges();
                return PartialView("_PeticioCorrecte");
            }

            return PartialView("_PeticioCorrecte");
        }

View Index.cshtml:

@{
    ViewBag.Title = "";
}

<!-- Tab Buttons -->
<ul id="tabstrip" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#_Demanar" role="tab" data-toggle="tab">Demanar</a></li>
    <li><a href="#_AcceptarPeticio" role="tab" data-toggle="tab">Acceptar</a></li>
</ul>

<!-- Tab Content Containers -->
<div class="tab-content">
    <div class="tab-pane fade in active" id="_Demanar">@Html.Partial("_Demanar")</div>
    <div class="tab-pane fade" id="_AcceptarPeticio"></div>
</div>

@section scripts {
    <script>
    $('#tabstrip a').click(function (e) {
        e.preventDefault()
        var tabID = $(this).attr("href").substr(1);
        $(".tab-pane").each(function () {
            console.log("clearing " + $(this).attr("id") + " tab");
            $(this).empty();
        });
        //$("#" + tabID).load("/@ViewContext.RouteData.Values["controller"]/" + tabID)
    $.ajax({
        url: "/@ViewContext.RouteData.Values["controller"]/" + tabID,
        cache: false,
        type: "get",
        dataType: "html",
        success: function (result) {
            $("#" + tabID).html(result);
        }

    })
   $(this).tab('show')
});
    </script>
}

View _Demand:

@model Peticions.Models.PeticioUsuari

@{
    AjaxOptions options = new AjaxOptions
    {
        HttpMethod = "Post",
        UpdateTargetId = "content",
        InsertionMode = InsertionMode.InsertAfter
    };
}

@using (Ajax.BeginForm("_Demanar", "PeticioUsuaris", null, options))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal tabs">
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group">
            @Html.LabelFor(model => model.Nom, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Nom, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Nom, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.PrimerCognom, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.PrimerCognom, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.PrimerCognom, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.SegonCognom, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.SegonCognom, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.SegonCognom, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default"/>
            </div>
        </div>
    </div>
}

<div id="content"></div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

View _PeticioCorrecte:

@model Peticions.Models.PeticioUsuari

<div class="alert alert-success">
    <a href="@Url.Action("Index", "PeticioUsuaris", new { id = UrlParameter.Optional })">
        Petició enviada correctament! Clica aquí per a crear-ne un altre.
    </a>
</div>
    
asked by NorbertFD 20.04.2016 в 09:13
source

0 answers