在asp.net mvc 5中使用ajax選項卡

Question

我想使用ajax來更新TAB的內容並且它不起作用，當我按下提交按鈕時，我會更新所有頁面。我不知道如何解決它。

謝謝。

控制器Pet​​icioUsuarisController：

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

查看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> 
} 

查看_Demanar：

@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") 
} 

查看_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> 

Answer 1

試試這個

@{ 
    AjaxOptions options = new AjaxOptions 
    { 
     HttpMethod = "Post", 
     UpdateTargetId = "formContent" 
    }; 
    }  
    @using (Ajax.BeginForm("_AcceptarPeticio", "PeticioUsuaris", null,options )) 
    { 
    }