我有两个javascript数组,我需要传递到MVC 3控制器,然后将值输入到数据库中。我有两个复选框列表和两个列表容器的更改事件,以获取其复选框ID和已检查的值,然后将它们添加到数组中。
@{
ViewBag.Title = "JS Arrays in ASP.NET MVC 3";
}
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
});
</script>
<p>Use the form below to check items from the lists and save them to the database.</p>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Pre-Accept</a></li>
<li><a href="#tabs-2">Post-Accept</a></li>
</ul>
<div id="tabs-1">
<div id="checklist1">
<table>
<tbody>
<tr>
<td>
<input type="checkbox" id="StudentPreAccept.Transcripts" />
</td>
<td>Transcripts
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="StudentPreAccept.BiographicalInfo" />
</td>
<td>Biographical Info
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="StudentPreAccept.PersonalEssay" />
</td>
<td>Personal Essay
</td>
</tr>
</tbody>
</table>
</div>
<br />
<button id="savePreAccept" onclick="saveAcceptList();">Save Pre-Accept</button>
</div>
<div id="tabs-2">
<div id="checklist2">
<table>
<tbody>
<tr>
<td>
<input type="checkbox" id="StudentPostAccept.EnrollmentFee" />
</td>
<td>Enrollment Fee
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="StudentPostAccept.Photo" />
</td>
<td>Photo
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="StudentPostAccept.TravelItinerary" />
</td>
<td>Travel Itinerary
</td>
</tr>
</tbody>
</table>
</div>
<br />
<button id="savePostAccept" onclick="saveAcceptList();">Save Post-Accept</button>
</div>
</div>
<div id="results"></div>
<script type="text/javascript">
var preAcceptArray = { };
var postAcceptArray = { };
$(" #checklist1 [type='checkbox']").change(function() {
// add to the preAcceptArray
var id = $(this).attr('id');
var checked = $(this).is(':checked') ? 'True' : 'False';
preAcceptArray[id] = checked;
console.log(JSON.stringify(preAcceptArray));
});
$(" #checklist2 [type='checkbox']").change(function () {
// add to the postAcceptArray
var id = $(this).attr('id');
var checked = $(this).is(':checked') ? 'True' : 'False';
postAcceptArray[id] = checked;
console.log(JSON.stringify(postAcceptArray));
});
function saveAcceptList() {
$.post('/Home/UpdateLists', {
preAcceptList : preAcceptArray,
postAcceptList : postAcceptArray
}, function(response) {
$("#results").html(response);
}, "json");
}
</script>
然后在控制器方面我有一个JsonResult动作,它接受两个参数作为输入。
[HttpPost]
public JsonResult UpdateLists(string[][] preAcceptList, string[][] postAcceptList)
{
// do something with the lists
// return the result
return Json("List(s) updated successfully.", JsonRequestBehavior.AllowGet);
}
问题是无论我传入什么类型的参数,我都无法从ajax帖子中获取值。我应该将它们作为JSON传递,然后只解析JSON吗?
我知道我错过了一些东西,任何帮助都会受到赞赏。
答案 0 :(得分:3)
试试这个,你在复选框的选择器中有一些错误等等,并且当你使用jQuery时,你可以为按钮指定click事件:
JS:
$(function () {
var save_EventClickButton = function (event) {
var data = {}, index = 0;
$('#checklist1 input[type="checkbox"]').each(function (i, el) {
data['PreAcceptList[' + index + '].Key'] = $(this).attr('id');
data['PreAcceptList[' + (index++) + '].Value'] = $(this).is(':checked') ? 'true' : 'false';
});
$('#checklist2 input[type="checkbox"]').each(function (i, el) {
data['PostAcceptList[' + index + '].Key'] = $(this).attr('id');
data['PostAcceptList[' + (index++) + '].Value'] = $(this).is(':checked') ? 'true' : 'false';
});
//data['PreAcceptList'] = preAcceptArray;
//data['PostAcceptList'] = postAcceptArray;
$.post('/Grilla/UpdateLists', data, function (response) {
$("#results").html(response);
}, "json");
return false;
};
$('#savePostAccept').bind('click', save_EventClickButton);
$('#savePreAccept').bind('click', save_EventClickButton);
});
HTML(仅限按钮):
...
<button id="savePreAccept">Save Pre-Accept</button>
...
<button id="savePostAccept">Save Post-Accept</button>
...
.NET(C#):
[HttpPost]
public JsonResult UpdateLists(IDictionary<string, string> PreAcceptList, IDictionary<string, string> PostAcceptList)
{
return Json("List(s) updated successfully.");
}