我有一个表单,其中包含用于选择用户的DropDownList和用于用户数据的表单。所有控件都嵌套在表单中。
当然用户DropDownList提交表单以通知用户选择以获取适当的数据。
我想要一个Button类型(提交),它保存当前用户的数据。由于两个控件都采用相同的形式,并且它们都提交了,如果我尝试选择用户或在我的操作中保存数据,如何区分?
我尝试创建两个表单如下:
@model MyApp.Models.UserModel
@{
ViewBag.Title = "Profiles";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript" src="chosen.jquery.js"></script>
<script type="text/javascript" src="bootstrap-switch.js"></script>
<link rel="stylesheet" href="chosen.css" />
<link rel="stylesheet" href="bootstrap-switch.css" />
<style type="text/css">
.chosen-search{
display: none;
}
.form-group label{
margin-top: 10px;
}
.row{
margin-bottom: 20px;
}
th{
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#CurrentUserId').chosen({placeholder_text_single: "Select a user"});
$('#CurrentGroupId').chosen({placeholder_text_single: "Select a group"});
$('#CurrentRoleId').chosen({placeholder_text_single: "Select a role"});
$('#IsActive').bootstrapSwitch({
onColor: "success",
offColor: "danger",
onText: "ACTIVE",
offText: "PASSIVE",
animate: false,
handleWidth: 60
});
$('.authorizationCheckBox').bootstrapSwitch({
onColor: "success",
offColor: "danger",
onText: "Y",
offText: "N",
animate: false,
size: "mini"
});
});
</script>
@using (Html.BeginForm("Profile", "User"))
{
@Html.AntiForgeryToken()
<div class="row">
<div class="col-sm-3">
<div class="row">
<label class="control-label">Selected user :</label>
</div>
</div>
<div class="col-sm-9">
<div class="row">
@Html.DropDownListFor(x => x.CurrentUserId, new SelectList(Model.AllUsers, "Id", "Username"), "", new { @class = "form-control", onchange = @"this.form.submit();" })
</div>
</div>
</div>
}
@using (Html.BeginForm("SaveProfile", "User"))
{
if (!string.IsNullOrWhiteSpace(Model.CurrentUser))
{
<div class="row">
<div class="col-sm-3">
<div class="row">
@if (string.IsNullOrWhiteSpace(Model.UserImageUrl))
{
<img src="no-user.png" class="img-circle" alt="..." style="width: 35%; display: block; margin: auto;">
<button type="button" class="btn btn-primary" style="display: block; margin: auto; margin-top: 10px;">
<span class="glyphicon glyphicon-upload"></span> Upload avatar
</button>
}
else
{
<img src="@Model.UserImageUrl" class="img-circle" alt="..." style="width: 35%; display: block; margin: auto;">
<button type="button" class="btn btn-primary" style="display: block; margin: auto; margin-top: 10px;">
<span class="glyphicon glyphicon-retweet"></span> Change avatar
</button>
}
</div>
<div class="row">
<div class="input-group" style="margin: 0 auto;">
<div class="switch-button xlg showcase-switch-button">
@Html.CheckBoxFor(x => x.IsActive)
</div>
</div>
</div>
</div>
<div class="col-sm-9">
<div class="row">
<div class="form-group">
<label class="control-label col-sm-2">Username :</label>
<div class="col-sm-10">
<input id="CurrentUser" name="CurrentUser" class="form-control form-control-flat" value="@Model.CurrentUser" />
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-2">E-mail :</label>
<div class="col-sm-10">
<input id="EMail" name="EMail" class="form-control form-control-flat" value="@Model.EMail" />
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-2">Membership :</label>
<div class="col-sm-10">
@Html.DropDownListFor(x => x.CurrentGroupId, new SelectList(Model.AllGroups, "Id", "Name"), "", new { @class = "form-control" })
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="control-label col-sm-2">Role :</label>
<div class="col-sm-10">
@Html.DropDownListFor(x => x.CurrentRoleId, new SelectList(Model.AllRoles, "Id", "Name"), "", new { @class = "form-control" })
</div>
</div>
</div>
</div>
</div>
<button id="btnSave" type="submit" class="btn btn-info" style="float: right; margin-right: 10px; margin-bottom: 40px;">
<span class="glyphicon glyphicon-trash"></span>Save changes
</button>
}
}
[HttpGet]
public ActionResult Profile()
{
return View(CreateInitialUserModel());
}
[HttpPost]
public ActionResult Profile(UserModel model)
{
model = GetUserModel(model.CurrentUserId.Value);
ModelState.Clear();
return View(model);
}
[HttpPost]
public ActionResult SaveProfile(UserModel model)
{
SaveModel(model)
return RedirectToAction("Profile");
}
但问题是,在HttpPost of Profile动作效果很好。但是当我单击Save按钮并调用HttpPost SaveProfile操作时,输入参数模型没有在屏幕上设置的值。
答案 0 :(得分:0)
我实际上会使用两种形式。它不仅可以解决您的问题,因为您可以在每个表单中添加隐藏字段或其他内容以指示提交的内容,但它可以防止您可能遇到的其他问题,例如在任何所需的用户字段上验证失败当您选择一个用户时,创建表单,因为没有为这些字段提交数据。
除此之外,只需使用您已经使用的任何JavaScript,当从下拉列表中选择一个选项以更改隐藏字段的值或以其他方式在提交之前修改帖子数据时自动提交。
答案 1 :(得分:0)
为什么不使用jquery进行数据检索?您可以切换到下拉列表,而不是调用jquery函数,该函数对检索相关用户数据的控制器方法执行ajax调用。然后,您可以使用jquery将数据绑定到页面上的相应字段。然后,您只能在视图上有一个提交按钮,通过正常的mvc表单流程处理。
答案 2 :(得分:-1)
-in drop downdown list change事件,您应该将UserID存储到变量,如全局变量或hiddenfields。 - 创建一个按钮
in function =
function submitvalues()
{
//get stored userID here from variable
//perform submit here
}