[英]How to pass Model from View to Controller, add items to list, pass back to view
I have a partial view inside a form that append to the form each time a button is clicked.每次单击按钮时,我都会在表单中添加一个局部视图。 It is a text area with a set of responses.
它是一个带有一组响应的文本区域。 How can I pass my model from the view to the controller, add it to the list model and back to view?
如何将我的模型从视图传递到控制器,将其添加到列表模型并返回视图?
I am passing ReviewFormViewModel I want to pass the ListAdhoc to the partial controller and add items to it then pass it back to the view.我正在传递 ReviewFormViewModel 我想将 ListAdhoc 传递给部分控制器并向其添加项目,然后将其传递回视图。
public class ReviewFormViewModel
{
...// other fields
public List<AdhocViewModel> ListAdhoc { get; set; }
}
public class AdhocViewModel
{
public int? ReviewId { get; set; }
public String AdhocQuestion { get; set; } //free form
public int? SelectedAnswer { get; set; } // for binding int? for optional
public String Comments { get; set; }
public List<AdhocOptionsVM> ListAdhocOptions { get; set; }
}
public class AdhocOptionsVM
{
public int AnswerId { get; set; }
public String RatingName { get; set; }
public Decimal Rating { get; set; }
public String ActiveFl { get; set; }
}
controller for partial view局部视图控制器
public PartialViewResult Adhoc()
{
//pass model object on button click and add each item to the model everytime
var AdhocObj = new AdhocViewModel();
AdhocObj.ListAdhocOptions = new List<AdhocOptionsVM>();
var query = db.dbQuestionOptions.Where(qo => qo.ActiveFl == "Y").OrderByDescending(qo => qo.Rating).ToList();
foreach (var item in query)
{
var AdhocAnsOptionsVMObj = new AdhocOptionsVM();
AdhocAnsOptionsVMObj.AnswerId = item.AnswerId;
AdhocAnsOptionsVMObj.RatingName = item.RatingName;
AdhocAnsOptionsVMObj.Rating = item.Rating;
AdhocAnsOptionsVMObj.ActiveFl = item.ActiveFl;
AdhocObj.ListAdhocOptions.Add(AdhocAnsOptionsVMObj);
}
return PartialView("Adhoc", AdhocObj);
}
and partial view that is using the ReviewFormViewModel aswell:以及使用 ReviewFormViewModel 的部分视图:
<div class="adhoc">
@using (Html.BeginCollectionItem("adhoc"))
{
<div class="panel panel-success">
<div class="panel-heading">
@Html.HiddenFor(m => m.ReviewId)
@Html.HiddenFor(m => m.AdhocId)
@Html.TextAreaFor(m => m.AdhocQuestion, htmlAttributes: new { @style = "width:650px", @placeholder = "Enter Adhoc Question here" })<br />
</div>
<div class="panel-body">
@foreach (var optAnswer in Model.ListAdhocOptions)
{
<div class="radio">
<responselabel>@Html.RadioButtonFor(m => m.SelectedAnswer, optAnswer.AnswerId, new { id = optAnswer.AnswerId }) @optAnswer.RatingName</responselabel><br />
</div>
}
<div>@Html.ValidationMessageFor(m => m.SelectedAnswer)</div><br />
@Html.TextAreaFor(m => m.Comments, htmlAttributes: new { @style = "width:650px", @placeholder = "Comments" })<br /><br />
</div>
<button type="button" class="delete">Delete</button>
</div>
}
main view主视图
@model CustomerFeedback.Areas.ProjectManagers.Models.ReviewFormViewModel
@{
ViewBag.Title = "CreateFormsIndex";
}
<h4 align="center">Project Review Form</h4>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="text-center">
<h4>
@Html.DisplayName(Model.ProjectId) @Html.DisplayName(Model.ProjectName)
</h4>
<h4>
PM: @Html.DisplayName(Model.FullName)
</h4>
</div>
</div>
</div>
</div>
<div class="container">
<br />
<div class="panel-group">
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(m => m.ProjectId)
@Html.HiddenFor(m => m.AccountId)
@Html.HiddenFor(m => m.ReviewDate)
<div class="panel panel-default">
<div class="panel-body">
<div class="panel-group">
<div class="panel-heading">
<h4 class="panel-title">
Required Questions
</h4>
</div>
@for (int i = 0; i < Model.ListReqQuestions.Count; i++)
{
<div class="panel panel-success">
<div class="panel-heading">
@Html.HiddenFor(m => m.ListReqQuestions[i].QuestionId)
@Html.DisplayFor(m => m.ListReqQuestions[i].QuestionText)
</div>
<div class="panel-body">
@foreach (var optAnswer in Model.ListReqQuestions[i].ListQuestionOptions)
{
<div class="radio">
<responselabel>@Html.RadioButtonFor(m => m.ListReqQuestions[i].SelectedAnswer, optAnswer.AnswerId, new { id = optAnswer.AnswerId }) @optAnswer.RatingName</responselabel><br />
</div>
}
<div>@Html.ValidationMessageFor(m => m.ListReqQuestions[i].SelectedAnswer)</div><br />
@Html.TextAreaFor(m => m.ListReqQuestions[i].Comments, htmlAttributes: new { @style = "width:650px", @placeholder = "Comments" })<br /><br />
</div>
</div>
}
<div class="panel-heading">
<h4 class="panel-title">
Optional Questions
</h4>
</div>
@for (int i = 0; i < Model.ListOpQuestions.Count; i++)
{
<div class="panel panel-success">
<div class="panel-heading">
@Html.HiddenFor(m => m.ListOpQuestions[i].QuestionId)
@Html.DisplayFor(m => m.ListOpQuestions[i].QuestionText)
</div>
<div class="panel-body">
@foreach (var optAnswer in Model.ListOpQuestions[i].ListQuestionOptions)
{
<div class="radio">
<responselabel>@Html.RadioButtonFor(m => m.ListOpQuestions[i].SelectedAnswer, optAnswer.AnswerId, new { id = optAnswer.AnswerId }) @optAnswer.RatingName</responselabel><br />
</div>
}
<div>@Html.ValidationMessageFor(m => m.ListOpQuestions[i].SelectedAnswer)</div><br />
@Html.TextAreaFor(m => m.ListOpQuestions[i].Comments, htmlAttributes: new { @style = "width:650px", @placeholder = "Comments" })<br /><br />
</div>
</div>
}
@*on click (new adhoc question) add a new freeform question with list of answers*@
<div class="panel panel-success" id="adhoc">
@* renders partial adhoc view *@
</div>
<br />
<div class="center">
<input type="button" value="New Adhoc Question" class="btnAdhoc btn-success" />
</div>
<br />
<div class="center">
<input type="submit" value="Save" name="Command" class="btn btn-success" />
<input type="submit" value="Submit" name="Command" class="btn btn-success" />
<input type="submit" value="Cancel" name="Command" class="btn btn-success" />
<input type="submit" value="Attach" name="Command" class="btn btn-success" />
</div>
</div>
</div>
</div>
}
</div>
</div>
<script>
$(function () {
$('.btnAdhoc').click(function (event) {
event.preventDefault();
$.ajax({
url: '/ProjectManagers/Forms/Adhoc',
//data: JSON.stringify(model),
type: 'get',
success: function (result) {
$('#adhoc').append(result);
}
});
});
})
</script>
UPDATE: I've added the AdhocViewModel.更新:我添加了 AdhocViewModel。
Ive added the view model for those properties.我已经为这些属性添加了视图模型。 I have a form with a set of questions and responses to be answered.
我有一个表格,其中包含一组要回答的问题和答案。 Those are from the database.
那些来自数据库。 I have a button, on click will generate the partial view and append to the form (can be many).
我有一个按钮,单击将生成局部视图并附加到表单(可以是多个)。 The partial view consists of a text area (for any question entered), set of responses (from database) and a comment box.
局部视图由一个文本区域(用于输入的任何问题)、一组响应(来自数据库)和一个评论框组成。 I am not sure how to handle this on post (submit).
我不知道如何在发布(提交)时处理这个问题。 My attempt is to pass the model from the view to the partial controller, add items to it and pass it back to the view for processing.
我的尝试是将模型从视图传递到局部控制器,向其中添加项目并将其传递回视图进行处理。 I am not have any success on passing model data
我在传递模型数据方面没有任何成功
UPDATE 2 Updated code with using BeginCollectionItem helper.更新 2使用 BeginCollectionItem 帮助程序更新了代码。 Added main view
添加了主视图
The reason that the collection does not bind is because the parameter in BeginCollectionItem()
must match the name of you property.集合未绑定的原因是因为
BeginCollectionItem()
的参数必须与您的属性名称匹配。 Change it to将其更改为
@using (Html.BeginCollectionItem("ListAdhoc")) // binds to List<AdhocViewModel> ListAdhoc
In addition you also need a loop in the main view to render existing AdhocViewModel
in the collection.此外,您还需要在主视图中使用循环来呈现
AdhocViewModel
中的现有AdhocViewModel
。 Even if none exist initially, it is still required in case you need to return the view because ModelState
is invalid.即使最初不存在,如果由于
ModelState
无效而需要返回视图,仍然需要它。 In the main view include在主视图中包括
<div class="panel panel-success" id="adhoc">
@foreach(var item in Model.ListAdhoc)
{
@Html.Partial("Adhoc", item)
}
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.