代码之家  ›  专栏  ›  技术社区  ›  spoilerd do

AJAX将modelview发布到我的控制器

  •  0
  • spoilerd do  · 技术社区  · 7 年前

    我正在制作一个网站,版主可以在其中的某个pc部分。这只是我网站上的一张表格。我希望表单通过AJAX发布,以便在添加部件后不会刷新。我正在用ASP制作应用程序。net Core 2.0

    这是我的观点:

        @model PcBuildAddViewModel
    @{
        ViewData["Title"] = "Add";
    }
    <div class="form-container">
        <form id="AddPcForm" class="form-wrapper" method="post">
            <p>Name:</p>
            <input asp-for="@Model.PcPart._Name" type="text" class="form-control"/>
            <br/>
            <p >Type:</p>
            <div class="form-select">
                <select asp-for="@Model.PcPart._Type" asp-items="@Model.AllTypes">
                </select>
            </div>
            <br/>
            <p>Info:</p>
            <input asp-for="@Model.PcPart.Information" type="text" class="form-control"/>
            <br/>
            <p>Properties:</p>
            <div class="form-select">
                <select asp-for="@Model.Properties" asp-items="@Model.AllProperties" multiple="multiple">
                </select>
            </div>
            <br/>
            <p>Image:</p>
            <input asp-for="@Model.Image" type="file" class="inputfile inputfile-1"/>
            <label asp-for="@Model.Image">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
                </svg> <span>Choose a file&hellip;</span>
            </label>
            <br/>
            <button class="btn btn-1 btn-1e" type="submit">
                <span>Add</span>
            </button>
        </form>
    </div>
    

    我想通过AJAX发布的viewmodel:

    public class PcBuildAddViewModel
    {
        public List<SelectListItem> AllProperties { get; } = new List<SelectListItem>();
        public List<SelectListItem> AllTypes { get; } = new List<SelectListItem>();
        public IFormFile Image { get; set; }
        public PcPart PcPart { get; set; }
        public List<int> Properties { get; set; }
    
        public PcBuildAddViewModel()
        {
        }
    
        public PcBuildAddViewModel(List<Propertie> allProperties, List<string> allTypes)
        {            
            foreach (string type in allTypes)
            {
                SelectListItem listItem = new SelectListItem
                {
                    Text = type,
                    Value = type
                };
                AllTypes.Add(listItem);
            }
    
            foreach (Propertie propertie in allProperties)
            {
                SelectListItem listItem = new SelectListItem
                {
                    Text = propertie._Value,
                    Value = propertie.Id.ToString()
                };
                AllProperties.Add(listItem);
            }
        }
    }
    

    我要接收表单的操作张贴方法:

    [HttpPost]
            public IActionResult AddPcPart(PcBuildAddViewModel viewModel) 
            {
                return RedirectToAction("Add");
            }
    

    最后,我的AJAX:

    $('#AddPcForm').on('submit', function(event) {
    
            var viewModel = $(this).serialize();
    
    
            ajaxPost("/PCBuild/AddPcPart", viewModel);
    
            event.preventDefault();
        });
    function ajaxPost(ul, dt) {
            $.ajax({
                type: "POST",
                url: ul,
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: dt,
                success: ajaxSucces,
                error: function(result) {
                    console.log(result);
                }
            });
        }
    

    我希望有人能帮助我。我在没有AJAX的情况下尝试过这个方法,效果很好,但当我通过AJAX调用时。我得到一个空的viewmodel,或者当我将[Frombody]放在控制器中参数的前面时,我得到一个空的viewmodel。

    1 回复  |  直到 7 年前
        1
  •  0
  •   spoilerd do    7 年前

    感谢StephenMuecke发布了答案。问题是contentType需要是默认的,所以我只是在我的AJAX帖子中删除了contentType参数。在那之后,我移除了[从身体上]因为不再需要它了。