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

Question

我有一个想要在其中显示 Toastr 通知的 viewModel，但是当我运行代码时，它只是返回到 Index 页面，并且不确认 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" }))

第 4 个参数用于 HtmlAttributes。

Answer 2

使用 return false 代替 e.preventDefault()，如下所示：

$("#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

如果您使用的是 Jquery，您需要同时使用 e.prevenDefault() 和 e.stopPropagation() 来防止默认事件发生并限制事件冒泡然后 return false 为你做这两件事。