使用Toastr返回ajax對象 - Asp.Net MVC

Question

我有一個viewModel，我想要顯示Toastr通知，但是當我運行代碼時，它只是回到索引頁面，並且不承認e。 preventDefault（）方法。

當我點擊保存時，我希望它在重定向到索引頁之前返回「成功」通知？

下面是代碼：

@model Rubyx.ViewModels.McnFormViewModel 
@{ 
ViewBag.Title = "MCN Form"; 
Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<h2>Bidston MCN</h2> 


@using (Html.BeginForm("Save", "BidstonHwrc", new { id = "mcnForm"})) 
{ 
@*@Html.ValidationSummary(true, "Please fix the below errors")*@ 

@*<div class="form-group"> 
    @Html.LabelFor(w => w.BidstonHwrc.McnNumber) 
    @Html.TextBoxFor(w => w.BidstonHwrc.McnNumber, new { @class = "form- 
control", @readonly = "readonly" }) 
</div>*@ 

<div class="form-group"> 
    @Html.LabelFor(w => w.BidstonHwrc.Id) 
    @Html.TextBoxFor(w => w.BidstonHwrc.Id, new { @class = "form-control", 
@readonly = "readonly" }) 
</div> 




<div class="form-group"> 
    @Html.LabelFor(w => w.BidstonHwrc.DateEntered) 
    @Html.TextBoxFor(w => w.BidstonHwrc.DateEntered, new { @class = "form- 
control", @readonly = "readonly"}) 
</div> 


<div class="form-group"> 
    @Html.LabelFor(w => w.BidstonHwrc.WasteTypeId) 
    @Html.DropDownListFor(w => w.BidstonHwrc.WasteTypeId, new 
SelectList(Model.WasteType, "Id", "Name"), "Select Waste Type", new { @class 
= "form-control" }) 
    @*@Html.ValidationMessageFor(w => w.BidstonHwrc.WasteType)*@ 
</div> 


<div class="form-group"> 
    @Html.LabelFor(w => w.BidstonHwrc.DestinationId) 
    @Html.DropDownListFor(w => w.BidstonHwrc.DestinationId, new 
SelectList(Model.Destination, "Id", "Name"), "Select Destination", new { 
@class = "form-control" }) 
    @*@Html.ValidationMessageFor(w => w.BidstonHwrc.Destination)*@ 
</div> 


<div class="form-group"> 
    @Html.LabelFor(w => w.BidstonHwrc.Registration) 
    @Html.TextBoxFor(w => w.BidstonHwrc.Registration, new { @class = "form- 
control" }) 
</div> 


<div class="form-group"> 
    @Html.LabelFor(w => w.BidstonHwrc.StaffMemberId) 
    @Html.DropDownListFor(w => w.BidstonHwrc.StaffMemberId, new 
SelectList(Model.StaffMember, "Id", "Name"), "Select User", new { @class = 
"form-control" }) 
    @*@Html.ValidationMessageFor(w => w.BidstonHwrc.StaffMember)*@ 
</div> 


<button type="submit" class="btn btn-primary">Save</button> 



@Html.HiddenFor(w => w.BidstonHwrc.Id) 
@Html.AntiForgeryToken(); //a secret code and a cookie on the users computer 
//back button that returns you to the index page 
@Html.ActionLink("Back", "Index", "BidstonHwrc", null, new { @class = "btn 
btn-primary" }) 

} 

@section scripts{ 
<script> 
    $(document).ready(function() { 

     var vm = {}; //blank object 


     $("#mcnForm").submit(function (e) { 
      e.preventDefault(); 

      $.ajax({ 
       url: "/api/BidstonHwrc", 
       method: "post", 
       data: vm 
      }) 
      .done(function() { 
       toastr.success("MCN succesfully recorded"); 
      }) 
      .fail(function() { 
       toastr.error("Something went wrong!") 
      }); 

     }); 


     }); 

</script> 

@Scripts.Render("~/bundles/lib") 
} 

這裏是我的控制器：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Data.Entity.Validation; 
using Rubyx.ViewModels; 
using Rubyx.Models; 
using System.Web.Mvc; 

namespace Rubyx.Controllers 
{ 
public class BidstonHwrcController : Controller 
{ 
    private ApplicationDbContext _context; //this is our call to the DB 

    public BidstonHwrcController() //initialise the DB call in a constructor 
    { 
     _context = new ApplicationDbContext(); 
    } 

    protected override void Dispose(bool disposing) //disposable object 
    { 
     _context.Dispose(); 
    } 


    // GET: BidstonHwrc 
    public ViewResult Index() 
    { 
     //var bidston = _context.BidstonHwrc.ToList(); //LAZY LOADING 
     return View(); 
    } 



    public ActionResult New() 
    { 
     var wastetype = _context.WasteTypes.ToList(); 
     var destination = _context.Destinations.ToList(); 
     var staffmember = _context.StaffMember.ToList(); 

     var viewModel = new McnFormViewModel 
     { 
      BidstonHwrc = new BidstonHwrc(), 
      WasteType = wastetype, 
      Destination = destination, 
      StaffMember = staffmember 
     }; 

     return View("McnForm", viewModel); 
    } 






    [HttpPost] 
    [ValidateAntiForgeryToken] 
    public ActionResult Save(BidstonHwrc bidstonhwrc) 
    { 
     _context.BidstonHwrc.Add(bidstonhwrc); 



     try 
     { 
      _context.SaveChanges(); //either all changes are made or none at 
    all 
      //return Json(new { id = bidstonhwrc.Id }); 
     } 


     catch (DbEntityValidationException e) 
     { 
      Console.WriteLine(e); 
     } 


     return RedirectToAction("Index", "BidstonHwrc", new {id = 
      bidstonhwrc.Id }); 


    } 


    public ActionResult Edit(int id) 
    { 
     var bidstonhwrc = _context.BidstonHwrc 
      .SingleOrDefault(w => w.Id == id); //if the customer exists in 
     the DB it will be returned, otherwise null 

     if (bidstonhwrc == null) 
      return HttpNotFound(); 

     var viewModel = new McnFormViewModel 
     { 
      BidstonHwrc = bidstonhwrc, 
      WasteType = _context.WasteTypes.ToList(), 
      Destination = _context.Destinations.ToList(), 
      StaffMember = _context.StaffMember.ToList() 
     }; 


     return View("McnForm", viewModel); 
    } 




} 
} 

，這裏是我的API控制器：

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Net; 
using System.Net.Http; 
using System.Data.Entity; 
using System.Web.Http; 
using Rubyx.Models; 
using Rubyx.Dtos; 
using AutoMapper; 

namespace Rubyx.Controllers.Api 
{ 
public class BidstonHwrcController : ApiController 
{ 
    private ApplicationDbContext _context; 

    public BidstonHwrcController() 
    { 
     _context = new ApplicationDbContext(); 
    } 


    //GET /api/BidstonHwrc 
    public IHttpActionResult GetBidstonHwrcs() 
    { 
     var bidstonhwrcDtos = _context.BidstonHwrc 
       .Include(b => b.WasteType) 
       .Include(b => b.Destination) 
       .Include(b => b.StaffMember) 
       .ToList() 
       .Select(Mapper.Map<BidstonHwrc, BidstonHwrcDto>); 


     return Ok(bidstonhwrcDtos); 
      //we are calling a delegate here not the method 
      //this maps the objects to eachother using a generic method 
    (Map) 

    } 



    //GET /api/BidstonHwrc/1 
    public IHttpActionResult GetBidstonHwrc(int id) 
    { 
     var bidstonhwrc = _context.BidstonHwrc.SingleOrDefault(b => b.Id == 
id); 

     if (bidstonhwrc == null) 
      return NotFound(); //takes an enumeration that specifies the 
kind of error 
                     //if 
the given resource is not found, we return the above exception 
     return Ok(Mapper.Map<BidstonHwrc, BidstonHwrcDto>(bidstonhwrc)); 
//Ok helper method used here 
    } 


    //POST /api/BidstonHwrc this action will only be called if we send an 
http post request 
    [HttpPost] 
    public IHttpActionResult CreateBidstonHwrc(BidstonHwrcDto 
bidstonhwrcDto) //changed the return type to Dto 
    { 
     //validate the object first 
     if (!ModelState.IsValid) 
      return BadRequest(); 


     //need to map the Dto back to our object 

     var bidstonhwrc = Mapper.Map<BidstonHwrcDto, BidstonHwrc> 
(bidstonhwrcDto); 


     _context.BidstonHwrc.Add(bidstonhwrc); //add it to our context 
     _context.SaveChanges(); 

     //we want to add the ID to our dto and return it to the client 

     bidstonhwrcDto.Id = bidstonhwrc.Id; 

     return Created(new Uri(Request.RequestUri + "/" + bidstonhwrc.Id), 
bidstonhwrcDto); //method for mapping single customer to the Dto 
    } 


    //PUT /api/BidstonHwrc/1 
    [HttpPut] 
    public void UpdateBidstonHwrc(int id, BidstonHwrcDto bidstonhwrcDto) 
    { 
     if (!ModelState.IsValid) 
      throw new HttpResponseException(HttpStatusCode.BadRequest); 

     var bidstonhwrcInDb = _context.BidstonHwrc.SingleOrDefault(b => b.Id 
== id); 
     //we need to check for the existence of this object in the DB 

     if (bidstonhwrcInDb == null) 
      throw new HttpResponseException(HttpStatusCode.NotFound); 

     //now we need to update the MCN 


     Mapper.Map(bidstonhwrcDto, bidstonhwrcInDb); 

     _context.SaveChanges(); 

    } 



    //DELETE /api/BidstonHwrc/1 
    [HttpDelete] 
    public void DeleteBidstonHwrc(int id) 
    { 
     //first we need to check that this id is present in the DB 
     var bidstonhwrcInDb = _context.BidstonHwrc.SingleOrDefault(b => b.Id 
== id); 

     if (bidstonhwrcInDb == null) 
      throw new HttpResponseException(HttpStatusCode.NotFound); 

     _context.BidstonHwrc.Remove(bidstonhwrcInDb); //object will be 
removed in memory 
     _context.SaveChanges(); 

    } 



} 
} 

Answer 1

您正在使用重載Html.BeginForm不適合您的情況。請嘗試以下：

@using (Html.BeginForm("Save", "home",FormMethod.Post,new { id = "mcnForm" })) 

第四個參數是HtmlAttributes。

Answer 2

而不是e.preventDefault（），使用返回false如下：

$("#mcnForm").submit(function (e) { 
    //e.preventDefault(); 

    $.ajax({ 
    url: "/api/BidstonHwrc", 
    method: "post", 
    data: vm 
    }) 
    .done(function() { 
    toastr.success("MCN succesfully recorded"); 
    }) 
    .fail(function() { 
    toastr.error("Something went wrong!") 
    }); 

    return false; 
}); 

有關一個更好的解釋e.preventDefault請閱讀event.preventDefault() vs. return false

Answer 3

你既需要e.prevenDefault（）和e.stopPropagation（），以防止違約事件從發生和限制事件的冒泡，如果你正在使用jquery然後返回false爲你做。