添加项鉴于列表框中单击按钮时 [英] Add items in listbox in view when button is clicked
问题描述
我有这个模型
public class CreateAppointmentSelectPersons
{
[DataType(DataType.EmailAddress, ErrorMessageResourceType = typeof (Resource), ErrorMessageResourceName = "CreateAppointment_Email_Invalid_Email_Address")]
[EmailAddress]
[Display(ResourceType = typeof(Resource), Name = "RegisterViewModel_EmailId_Email_Id")]
public string Email { get; set; }
public Boolean IsSuperOfficeConnected { get; set; }
[Display(ResourceType = typeof (Resource), Name = "CreateAppointmentSelectPersons_SelectedSuperOfficeEmail_SuperOffice_Contact")]
public string SelectedSuperOfficeEmail { get; set; }
public Boolean IsInternalAddressBookEmpty { get; set; }
[Display(ResourceType = typeof(Resource), Name = "CreateAppointmentSelectPersons_InternalAddressBookPersons_AddressBook_Contact")]
public string SelectedAddressBookPerson { get; set; }
[Display(ResourceType = typeof (Resource), Name = "CreateAppointmentSelectPersons_AttendeesListBox_Invited_Persons")]
[Required]
public List<string> AttendeesListBox { get;set; }
}
另外，我是新的视图列表框。
这个想法是用户将有高达三厢，当他们在一个电子邮件地址，然后点击旁边的按钮，我想将它添加到列表框的观点，我想只有在形式张贴到检索列表框中的值
Also, i'm new to listbox in view. The idea is users will have upto three box, and when they type in a email address and click button next to it, I want to to add it to Listbox in view, I want to retrieve the values from listbox only upon posting of the form.
这是我考虑到目前，
@using System.Web.Mvc.Html
@model DatePicker.Models.ViewModels.Appointment.CreateAppointmentSelectPersons
@{
ViewBag.Title = "Create";
Layout = "~/Views/Shared/_Layout.cshtml";
<link href="~/Content/themes/base/minified/jquery-ui.min.css" rel="stylesheet"/>
}
<h2>Create</h2>
@using(Html.BeginForm("Create","Appointment", new { @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
<hr />
@Html.ValidationSummary()
<div class="form-group">
@Html.LabelFor(m => m.Email, new { @class = "col-md-8 control-label" })
<div class="col-md-8">
@Html.TextBoxFor(m => m.Email, new { @class = "form-control" }) <input type='button' id="btnEmail" class="btn-default form-inline" value="Add>>" />
</div>
@if (Model.IsSuperOfficeConnected)
{
@Html.LabelFor(m=>m.SelectedSuperOfficeEmail, new {@class="col-md-8 control-label"})
<div class="col-md-8">
@Html.TextBoxFor(m=>m.SelectedSuperOfficeEmail,new{@class="form-control",PlaceHolder="Search in SuperOffice..."}) <input type='button' id="btnSuperOffice" class="btn-default" value="Add>>">
</div>
}
@if (Model.IsInternalAddressBookEmpty)
{
@Html.LabelFor(m => m.SelectedAddressBookPerson, new { @class = "col-md-8 control-label" })
<div class="col-md-8">
@Html.TextBoxFor(m=>m.SelectedAddressBookPerson,new{@class="form-control",PlaceHolder="Search in AddressBook..."}) <input type='button' id ="btnAddressBook" class="btn-default" value="Add>>">
</div>
}
@Html.ListBoxFor(m => m.AttendeesListBox, new SelectList(Model.AttendeesListBox), new { style = "width:100%;" })
</div>
}
@section Scripts{
@Scripts.Render("~/Scripts/jquery-ui-1.10.4.min.js")
<script type="text/javascript">
$(function() {
$("#SelectedSuperOfficeEmail").
autocomplete({
source: '/Appointment/SuperOfficePerson',
minLength: 1,
});
});
$(function() {
$("#SelectedAddressBookPerson").autocomplete({
source: '/Appointment/AddressBookPerson',
minLength: 1,
});
});
$(function() {
$('#btnEmail').click(function(e) {
var name = $('#Email').val();
$('#AttendeesListBox').append($("<option></option>").attr("value"), name).text(name);
});
});
$(function () {
$('#btnSuperOffice').click(function (e) {
var name = $('#SelectedSuperOfficeEmail').val();
$('#AttendeesListBox').append($("<option></option>").attr("value"), name).text(name);
});
});
$(function () {
$('#btnEmail').click(function (e) {
var name = $('#SelectedAddressBookPerson').val();
$('#AttendeesListBox').append($("<option></option>").attr("value"), name).text(name);
});
});
</script>
}
现在，我得到一个抱怨，说：无法解析ListBoxFor（拉姆达前pression）。
Right now I'm getting a complain that says "Cannot resolve ListBoxFor(lambda expression)".
我应该怎么做，使我的观点工作，以便在点击链接的价值被添加到列表框中，并在提交时我得到列表框的唯一值
What should I do, to make my view work so that upon button click the value gets added to list box and upon submission i get only the values of listbox
推荐答案
下面去解决方案 -
Here goes the solution -
让你的模型是 -
public class ListBoxModel
{
public List<string> Names { get; set; }
public List<string> SelectedNames { get; set; }
}
让你的控制器动作是 -
Let your controller actions be -
public class ListBoxController : Controller
{
public ActionResult Index()
{
ListBoxModel model = new ListBoxModel();
model.Names = new List<string>();
model.Names.Add("Rami");
return View(model);
}
public ActionResult Submit(ListBoxModel model)
{
return null;
}
}
指数控制器只是要创建的项目列表并将其发送到索引视图。索引视图将是 -
Index controller is simply going to create the List of items and send it to Index View. Index view is going to be -
@model MVC.Controllers.ListBoxModel
@{
ViewBag.Title = "Index";
}
<h2>View1</h2>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(function () {
$('#click1').click(function (e) {
var name = $("#txt1").val();
$('#SelectedNames').
append($("<option></option>").
attr("value", name).
text(name));
});
});
</script>
@using (Html.BeginForm("Submit", "ListBox", FormMethod.Post))
{
@Html.ListBoxFor(m => m.SelectedNames, new SelectList(Model.Names))
<input type="text" id="txt1" />
<input type="button" value="Click" id="click1" />
<input type="submit" value="submit"/>
}
在索引视图，当你在文本框中输入一个名称，然后点击按钮点击，它会被添加到列表框的客户方 -
In the Index view, when you enter a name in textbox and click on button 'Click', it will be added to Listbox on clientside -
当你选择ListBox中的项目，并点击提交按钮，表单将使用选定的值提交给列表框控制器的提交操作。
And when you select items in the ListBox and Click on Submit button, form will be submitted with selected values to the Submit Action of Listbox Controller.
更新
随着每个问题的更新，要发送的所有列表框项目到服务器，我们在表单中添加隐藏字段动态使用JQuery。
As per question update, To send all the ListBox Items to server, we add hidden fields in the form dynamically using JQuery.
查看 -
@model MVC.Controllers.ListBoxModel
@{
ViewBag.Title = "Index";
}
<h2>View1</h2>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(function () {
$('#click1').click(function (e) {
var name = $("#txt1").val();
$('#SelectedNames').
append($("<option></option>").
attr("value", name).
text(name));
$('#hiddensq').append("<input name='UserValues' type='hidden' value='"+ name +"'/>");
});
});
</script>
@using (Html.BeginForm("Submit", "ListBox", FormMethod.Post))
{
<div id="hiddensq">
</div>
for (int i = 0; i < Model.Names.Count; i++)
{
@Html.Hidden("UserValues", Model.Names[i]);
}
@Html.ListBoxFor(m => m.SelectedNames, new SelectList(Model.Names))
<input type="text" id="txt1" />
<input type="button" value="Click" id="click1" />
<input type="submit" value="submit" />
}
和在控制器 -
public ActionResult Submit(ListBoxModel model, IEnumerable<string> UserValues)
{
var c = Request.Form;
return null;
}
输出 - 所有选定值将在ListBoxModel现身，但所有的列表框项目将在UserValues参数现身
这篇关于添加项鉴于列表框中单击按钮时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
