如何通过mvc 3中的ajax将值传递给控制器

时间:2016-09-30 10:57:33

标签: jquery ajax asp.net-mvc

请找到图片。 我已经在下拉菜单的更改事件中编写了AJAX调用,并且在选择了必填字段后,我想将所选字段传递给控制器​​上的“提交”按钮,然后单击另一个AJAX调用。这是我的代码。是否可以这样做。我是新蜜蜂,如果需要更多信息,请发表评论。



<script src="../../Scripts/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("#ddlUser").change(function () {
            var User = $("#ddlUser option:selected").val();
            if (User != "") {
                $.ajax(
                {
                    type: "POST",
                    url: "/Home/GetPermissionDatail",
                    data: '{Username: "' + $("#ddlUser :selected").val().toString() + '" }',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        if (response != null) {
                            var trHTML = '';
                            var cnt = 1;
                            $.each(response, function (i, item) {
                                if (item.Status == "True") {
                                    trHTML += '<tr><td style=display:none;>' + item.PermID + '</td><td>' + item.Fname + '</td><td style=display:none;>' + item.formlinkname + '</td><td style=display:none;>' + item.Status + '</td><td><input id=Checkbox' + cnt + ' value=' + item.PermID + ',' + item.Fname + ' type=checkbox checked> </td></tr>';

                                }
                                else {
                                    trHTML += '<tr><td style=display:none;>' + item.PermID + '</td><td>' + item.Fname + '</td><td style=display:none;>' + item.formlinkname + '</td><td style=display:none;>' + item.Status + '</td><td><input id=Checkbox' + cnt + '  value=' + item.PermID + ',' + item.Fname + ' type=checkbox></td></tr>';
                                }
                                cnt++;
                            });
                            $('#records_table tbody').empty();
                            $('#records_table tbody').append(trHTML);

                        }
                    },
                    failure: function (response) {
                        alert("Error" + response);
                    }
                });
            }
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function(){
        var favorite = [];
        var chkuser;
        $("#ddlUser").change(function (){
            chkuser = $("#ddlUser :selected").val();
        });
        $("#Submit1").click(function (){
            //alert(getvalue_func());
            favorite.push(getvalue_func());
            var favString = favorite.join();
            alert(chkuser+","+favString);
            $.ajax({
                type: "POST",
                url: "/Home/SetPermissionsuser",
                data: JSON.stringify({ Username: "' + chkuser.toString() + '" }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    alert(response);
                },
                failure: function (response) {
                    alert(response);
                }
            });
        });
        function getvalue_func() {
            return $('#records_table input:checked').map(function () {
                return this.value;
            }).get().join(', ');
        }
    });
</script>
&#13;
<div class="col-md-9 push-md-3 panel-warning" >
	<div class="content-box-header panel-heading">
	  	<div class="panel-title ">Permission</div>
			<div class="panel-options">
				<a href="#" data-rel="collapse"><i class="glyphicon glyphicon-refresh"></i></a>
				<a href="#" data-rel="reload"><i class="glyphicon glyphicon-cog"></i></a>
			</div>
		</div>
		<div class="content-box-large box-with-header" style="font-family:Century Gothic;font-weight:bolder;font-size:12px">

                <div class="user-dashboard" id="Userwidth">
                    <div class="row">
                        <div class="col-md-5 col-sm-5 col-xs-12">
                                <div class="sales">
                                    <h2>Select User :</h2>
                                    <div class="btn">
                                            <select class="form-control" id="ddlUser" style="width:200px;">
                                            <option value="">Select</option>
                                                @foreach (var item in Model)
                                                {
                                                    <option>@item.UserName</option>
                                                }
                                        </select>
                                    </div>
                                </div>
                        </div>
                    </div>
                </div> 
                <div class="user-dashboard">
                    <div class="row">
                        <div class="col-md-5 col-sm-5 col-xs-12 gutter">
                                <div class="sales nav navbar-nav">
                                    <h5>Select form which you want to give permission</h5>
                                        <table class="table" id="records_table">
                                            <thead class="thead-inverse">
                                            <tr>
                                                <th scope="row" style="display:none;">ID</th>
                                                <th>Form Name</th>
                                                <th style="display:none;">Form Link Name</th>
                                            </tr> 
                                            </thead>
                                            <tbody>
                                    
                                            </tbody>                               
                                        </table>    
                                </div>
                        </div>
                    </div>
                </div> 
            @using (Html.BeginForm())
            {
                <div class="user-dashboard">
                <div class="row">
                    <div class="col-md-5 col-sm-5 col-xs-12">
                        <div class="sales">
                        <div class="form-group">
                            <div class="col-xs-6 col-sm-4 "><input id="Submit1" type="submit" value="Submit" class="btn btn-primary" /></div> 
                        </div>
                        </div>
                    </div>
                </div>
                </div> 
            }
    </div>
</div>
&#13;
&#13;
&#13;

enter image description here

2 个答案:

答案 0 :(得分:1)

您需要传递给data一个对象:

$.ajax(
  {
     type: "POST",
     url: "/Home/GetPermissionDatail",
     data: {Username: $("#ddlUser:selected").val()},
     contentType: "application/json; charset=utf-8",
     dataType: "json",
     ...

答案 1 :(得分:0)

试试这个我希望这会对你有所帮助

创建复选框时将复选框提供给复选框。

<input class="Checkbox" id=Checkbox' + cnt + '  value=' + item.PermID + ',' + item.Fname + ' type=checkbox>

隐藏字段

<input type="hidden" id="hidObjects" name="hidObjects" value="0" />



 <script type="text/javascript">
        $(document).ready(function(){
           var chkuser;
            $("#ddlUser").change(function (){
                chkuser = $("#ddlUser :selected").val();
            });
            $("#Submit1").click(function (){
                var SelectedIds = GetSelectCheckboxId();
                $('#hidObjects').val(SelectedIds);
                 $.ajax({
                    type: "POST",
                    url: "/Home/SetPermissionsuser",
                    data: JSON.stringify({ Username: "' + chkuser.toString() + '" }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        alert(response);
                    },
                    failure: function (response) {
                        alert(response);
                    }
                });
            });

        });
 function GetSelectCheckboxId() {
        var value = "";
        $(".checkbox:checked").each(function () {
            if (value == "")
                    value = $(this).val();
                else
                    value += "," + $(this).val();
           });
        return value;
    }
    </script>
控制器上的

   [HttpPost]
 public string YourActionName(FormCollection pFormObj)
 {
     string[] arr = pFormObj["hidObjects"].Split(',');
 }