Fatal编程技术网
  • javascript/
  • Javascript jQuery将Ajax调用中的数据传递给MVC操作方法

Javascript jQuery将Ajax调用中的数据传递给MVC操作方法

javascript c# jquery asp.net-mvc razor

Javascript jQuery将Ajax调用中的数据传递给MVC操作方法,javascript,c#,jquery,asp.net-mvc,razor,Javascript,C#,Jquery,Asp.net Mvc,Razor,我准备并填充了两个列表（左列表和右列表）。 然后我用这个JS代码将元素从一个列表移动到另一个列表。 而且效果很好 $(function () { $('body').on('click', '.list-group .list-group-item', function () { $(this).toggleClass('active'); }); $('.list-arrows button').click(function () { v

我准备并填充了两个列表（左列表和右列表）。 然后我用这个JS代码将元素从一个列表移动到另一个列表。 而且效果很好

$(function () {
    $('body').on('click', '.list-group .list-group-item', function () {
        $(this).toggleClass('active');
    });
    $('.list-arrows button').click(function () {
        var $button = $(this), actives = '';
        if ($button.hasClass('move-left')) {
            actives = $('.list-right ul li.active');
            actives.clone().appendTo('.list-left ul');
            actives.remove();
        } else if ($button.hasClass('move-right')) {
            actives = $('.list-left ul li.active');
            actives.clone().appendTo('.list-right ul');
            actives.remove();
        }        
    });
});
但老实说，当用户单击表单上的提交按钮时，我不知道如何将结果传递回codebehind

这是我的cshtml代码：

@using AuthDatabase.Entities
@using Identity.Models
@model RoleEdit

@{
    ViewData["Title"] = "Edit role";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h1>@ViewData["Title"]</h1>
<br />
<h4>Roles</h4>
<hr />
<div asp-validation-summary="All" class="text-danger"></div>

<form method="post">
    <input type="hidden" name="roleName" value="@Model.Role.Name" />
    <input type="hidden" name="roleId" value="@Model.Role.Id" />
    <div class="row">
        <div class="dual-list list-left col-md-5">
            <h5>No roles</h5>
            <div class="well text-right">
                <div class="row">
                    <div class="col-md-10">
                        <div class="input-group">
                            <span class="input-group-addon glyphicon glyphicon-search"></span>
                            <input type="text" name="SearchDualList" class="form-control" placeholder="search" />
                        </div>
                    </div>
                </div>
                <ul class="list-group">
                    @foreach (AppUser user in Model.NonMembers)
                    {
                        <li class="list-group-item">@user.UserName</li>
                    }
                </ul>
            </div>
        </div>
        <div class="list-arrows col-md-1 text-center">
            <button class="btn btn-default btn-sm move-left" type="button">
                <span class="btn btn-primary"><</span>
            </button>

            <button class="btn btn-default btn-sm move-right" type="button">
                <span class="btn btn-primary">></span>
            </button>
        </div>
        <div class="dual-list list-right col-md-5">
            <h5>With roles</h5>
            <div class="well">
                <div class="row">
                    <div class="col-md-10">
                        <div class="input-group">
                            <input type="text" name="SearchDualList" class="form-control" placeholder="search" />
                            <span class="input-group-addon glyphicon glyphicon-search"></span>
                        </div>
                    </div>
                </div>
                <ul class="list-group">
                    @foreach (AppUser user in Model.Members)
                    {
                        <li class="list-group-item">@user.UserName</li>
                    }
                </ul>
            </div>
        </div>
    </div>
    <br />
    <a asp-action="Index" class="btn btn-secondary">Back to List</a>
    <button type="submit" class="btn btn-primary">Save</button>
</form>

@section Scripts
{
    <script src="~/js/lists.js" asp-append-version="true"></script>
}
将此更改为 
@using(Html.BeginForm("Action","Controller")){your html here}
你也可以这样做

$.ajax({
url:'/controller/action',
data:form,
success:function(){alert('submitted');},
error:function(x,y,z){console.log(x,y,z);}
});
基本上，mvc解析器搜索具有与model btw相同的名称标记的元素

 public string[] AddIds { get; set; }
 public string[] DeleteIds { get; set; }
这两个领域很棘手

var addIds = ['a','b'];
deleteID也是如此 然后创建一个父对象，该对象包含后端所需的所有字段 值得一提的是，您可以在js中与@一起使用razor，在razor中与@一起使用js： 所以你可以这样做

@foreach(var id in AddIds){
 @:addIds.add(@id);
}

public ActionResult Edit(List<string> input)
最后但并非最不重要的一点是，你可以钩住一个事件，听它，然后开火

$('window').ready(function(){
$('#yourSubmitButtonId').on('click',function(){
$('form').submit();
});
});
将此更改为 
@using(Html.BeginForm("Action","Controller")){your html here}
你也可以这样做

$.ajax({
url:'/controller/action',
data:form,
success:function(){alert('submitted');},
error:function(x,y,z){console.log(x,y,z);}
});
基本上，mvc解析器搜索具有与model btw相同的名称标记的元素

 public string[] AddIds { get; set; }
 public string[] DeleteIds { get; set; }
这两个领域很棘手

var addIds = ['a','b'];
deleteID也是如此 然后创建一个父对象，该对象包含后端所需的所有字段 值得一提的是，您可以在js中与@一起使用razor，在razor中与@一起使用js： 所以你可以这样做

@foreach(var id in AddIds){
 @:addIds.add(@id);
}

public ActionResult Edit(List<string> input)
最后但并非最不重要的一点是，你可以钩住一个事件，听它，然后开火

$('window').ready(function(){
$('#yourSubmitButtonId').on('click',function(){
$('form').submit();
});
});
你的控制器应该是这样的

@foreach(var id in AddIds){
 @:addIds.add(@id);
}

public ActionResult Edit(List<string> input)

public ActionResult编辑（列表输入）
你的控制器应该是这样的

@foreach(var id in AddIds){
 @:addIds.add(@id);
}

public ActionResult Edit(List<string> input)

public ActionResult编辑（列表输入）
cshtml

@model HelloWorldMvcApp.SampleViewModel
    @{
        Layout = null;
    }

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Bootstrap 101 Template</title>
    </head>
    
    <body>
        @using(Html.BeginForm("GetAnswer","Home"))
        {
            
            <ul>
                @foreach(var item in Model.questions)
                {
                <input type="hidden" value="@item" name="questions"/>
                <li>@item</li>
                }
                @foreach(var item2 in Model.questions2)
                {
                <input type="hidden" value="@item2"  name="questions"/>
                <li>@item2</li>
                }
            </ul>
        @Model.text
        <input type="hidden" value="asd3" name="text"/>
        <input type="submit" value="submit"/>
        }
      
        <!-- JS includes -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    
        <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
        <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
        
    
    </body>
</html>
控制器

using System;
using System.Web.Mvc;
using System.Collections.Generic;
using System.Linq;
namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            SampleViewModel model = new SampleViewModel();
            model.questions.SetValue("Test Data",0);
            model.questions.SetValue("Test Data2",1);
            model.questions2.SetValue("Test Data",0);
            model.questions2.SetValue("Test Data2",1);
            return View(model);
        }


        [HttpPost]
        public ActionResult GetAnswer(SampleViewModel model)
        {               
            
                return View(model);
            
        }
        
    
    }
}
如您所见，它将字符串数组和字符串作为对象传递给mvc控制器

@model HelloWorldMvcApp.SampleViewModel
    @{
        Layout = null;
    }

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Bootstrap 101 Template</title>
    </head>
    
    <body>
        @using(Html.BeginForm("GetAnswer","Home"))
        {
            
            <ul>
                @foreach(var item in Model.questions)
                {
                <input type="hidden" value="@item" name="questions"/>
                <li>@item</li>
                }
                @foreach(var item2 in Model.questions2)
                {
                <input type="hidden" value="@item2"  name="questions"/>
                <li>@item2</li>
                }
            </ul>
        @Model.text
        <input type="hidden" value="asd3" name="text"/>
        <input type="submit" value="submit"/>
        }
      
        <!-- JS includes -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    
        <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
        <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
        
    
    </body>
</html>

using System;
using System.Web.Mvc;
using System.Collections.Generic;
using System.Linq;
namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            SampleViewModel model = new SampleViewModel();
            model.questions.SetValue("Test Data",0);
            model.questions.SetValue("Test Data2",1);
            model.questions2.SetValue("Test Data",0);
            model.questions2.SetValue("Test Data2",1);
            return View(model);
        }


        [HttpPost]
        public ActionResult GetAnswer(SampleViewModel model)
        {               
            
                return View(model);
            
        }
        
    
    }
}
控制器

using System;
using System.Web.Mvc;
using System.Collections.Generic;
using System.Linq;
namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            SampleViewModel model = new SampleViewModel();
            model.questions.SetValue("Test Data",0);
            model.questions.SetValue("Test Data2",1);
            model.questions2.SetValue("Test Data",0);
            model.questions2.SetValue("Test Data2",1);
            return View(model);
        }


        [HttpPost]
        public ActionResult GetAnswer(SampleViewModel model)
        {               
            
                return View(model);
            
        }
        
    
    }
}
正如您所见，它将字符串数组和字符串作为对象传递给mvc控制器

如果您认为您有答案，请标记为答案，否则我很乐意添加信息，但仍然卡住。我设法做了这样的事情：
$（'window'）.ready（函数（）{$（'submitBtn'）.on（'click'，函数（）{let addIds=[]；$（'list right ul li'）.each（函数（index）{addIds.push（$（this）.text（）；}）；$（'form'）.submit（）；}）当用户保存表单并准备一个名为addid的数组和一个适当的id列表时，会触发该命令。但AddId并没有与httpPost操作所需的模型绑定。基本上，当您创建具有相同名称的多个实例时，mvc解析器将其作为一个非常棒的数组，因此在示例AddId上进行foreach循环，并创建示例隐藏元素，每个元素中具有确切名称AddId，mvc解析器将其转换为string[]如果您认为您有您的答案，请将其标记为答案，否则我很乐意添加仍然卡住的信息。我设法做了这样的事情：
$（'window'）.ready（函数（）{$（'submitBtn'）.on（'click'，函数（）{let addIds=[]；$（'list right ul li'）.each（函数（index）{addIds.push（$（this）.text（）；}）；$（'form'）.submit（）；}）当用户保存表单并准备一个名为addid的数组和一个适当的id列表时，会触发该命令。但AddId并没有与httpPost操作所需的模型绑定。基本上，当您创建具有相同名称的多个实例时，mvc解析器将其作为一个非常棒的数组，因此在示例AddId上进行foreach循环，并创建示例隐藏元素，每个元素中具有确切名称AddId，mvc解析器将其转换为string[]另外，在全文中，您可以阅读此@Krzysztof PatraThanks以获取帮助。我在寻找更简单的东西（不使用Ajax）。认为可以将修改后的数据发送回MVC中的绑定模型。尽管如此，使用Ajax的解决方案仍能很好地工作。在全文中，您可以阅读@Krzysztof PatraThanks以获取帮助。我在寻找更简单的东西（不使用Ajax）。认为可以将修改后的数据发送回MVC中的绑定模型。尽管如此，使用Ajax的解决方案效果良好。

using System;
using System.Web.Mvc;
using System.Collections.Generic;
using System.Linq;
namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            SampleViewModel model = new SampleViewModel();
            model.questions.SetValue("Test Data",0);
            model.questions.SetValue("Test Data2",1);
            model.questions2.SetValue("Test Data",0);
            model.questions2.SetValue("Test Data2",1);
            return View(model);
        }


        [HttpPost]
        public ActionResult GetAnswer(SampleViewModel model)
        {               
            
                return View(model);
            
        }
        
    
    }
}