ユーザーが事前選択のチェックを外し、その状態をポストスルーオブジェクトにcheckbox保存できるフォームで作業するAJAXJSONControllerASP.Net MVC
要件：
- 事前に選択されたチェックボックスをオフにすると、データベース プロパティの行が "Active" = 'Y' から "Active=" = 'N' に変更されます。
- 新しく選択されたチェックボックスは、データベースに完全に新しい行を作成します
問題：
- 選択したテキスト ボックスのチェックを外した後、モデルは で更新されません
VIEW。したがって、サーバー側のデータは更新されません。AJAXデータが呼び出しに解析される前に、クライアント側の更新が必要です。 - チェックボックスの値の変更をキャプチャしてモデルに渡す方法がわからないため、解析されたデータをボタンのクリック/送信フォームに変更できます。
- 次のコードでも、送信時に dataType が間違っていると思われるため、エラー 200 が返されます (ここでボタン送信を実行します)。
意見：
@model List<DashboardPermissionTool.ViewModels.UserViewModel>
@using (@Html.BeginForm(new { id = "UserForm" }))
{
<table class="table">
<tr>
<th>User</th>
@for (int i = 0; i < Model[0].Roles.Count; i++)
{
<th>
@Model[0].Roles[i].RoleName
</th>
}
</tr>
@for (int i = 0; i < Model.Count; i++)
{
<tr>
<td>
@Html.HiddenFor(m => m[i].UserName)
@Model[i].UserName
</td>
@for (int j = 0; j < Model[i].Roles.Count; j++)
{
<td>
@Html.CheckBoxFor(m => m[i].Roles[j].IsSelected)
</td>
}
</tr>
}
</table>
<div class="form-actions">
<a id="SubmitUserRoles" class="btn btn-success submit" value="Save">Save changes</a>
</div>
<script>
var parsedData = @Html.Raw( new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(Model));
$(document).ready(function() {
$("#SubmitUserRoles").click(function () {
$('input[type=checkbox]').on("change",function(){
if($(this).prop('checked'))
{
$(this).attr('checked', false);
}
else
{
$(this).attr('checked', true);
}
});
$.ajax({
url: '@Url.Action("Create", "User")',
type: 'POST',
contentType: 'application/json; charset=utf-8',
cache: false,
dataType: 'json',
data: JSON.stringify(parsedData),
success: function (data) {
console.log(data);
}, error: function (xhr, ajaxOptions, error) {
alert(xhr.status);
alert("Error: " + xhr.responseText);
}
});
});
});
</script>
}
HTML 応答: :選択されたチェック ボックスごとの応答は次のとおりです。
<td>
<input checked="checked" data-val="true" data-val-required="The IsSelected field is required." name="[0].Roles[0].IsSelected" type="checkbox" value="true" />
<input name="[0].Roles[0].IsSelected" type="hidden" value="false" />
</td>
チェックされていないチェックボックスごとの応答は次のとおりです。
<td>
<input data-val="true" data-val-required="The IsSelected field is required." name="[0].Roles[1].IsSelected" type="checkbox" value="true" />
<input name="[0].Roles[1].IsSelected" type="hidden" value="false" />
</td>
ビューモデル:
public class UserViewModel
{
public string UserName { get; set; }
public List<RoleViewModel> Roles { get; set; }
}
public class RoleViewModel
{
public string RoleName { get; set; }
public bool IsSelected { get; set; }
}
コントローラ：
[HttpPost]
public ActionResult Create(List<UserViewModel> model)
{
for (int i = 0; i < model.Count; i++)
{
for (int j = 0; j < model[i].Roles.Count; j++)
{
db.User.Add(new User
{
username = model[i].UserName,
role = model[i].Roles[j].RoleName
});
}
db.SaveChanges();
return RedirectToAction("Index", "User");
}
return View("Index", model);
}