I have several form fields that may or may not need to be displayed, depending on the entity for which the form is loaded. So in my model I have boolean properties assigned accordingly.
Each field in the form has a corresponding "label" (not an html Label). The following code hides the html input element, but not the label !?!?
<!-- DBA: _________________ -->
<tr>
<td>
#if (Model.DisplayDBAField)
{
#Html.Raw("DBA:")
}
</td>
<td>
#Html.TextBox("DoingBusinessAs", Model.DoingBusinessAs, new { style = string.Format("visibility: {0};", Model.DisplayDBAField ? "visible" : "hidden") })
</td>
</tr>
In order to get the desired display, which is for both, the label and the input to not display, I had to rewrite the above as follows:
<!-- DBA: _________________ -->
<tr>
<td>
#Html.Raw(Model.DisplayDBAField ? "DBA:" : "")
</td>
<td>
#Html.TextBox("DoingBusinessAs", Model.DoingBusinessAs, new { style = string.Format("visibility: {0};", Model.DisplayDBAField ? "visible" : "hidden") })
</td>
</tr>
For some reason, the code block [ #if (Model.DisplayDBAField){} ] NEVER evaluates to true. Is this a Razor bug?, Visual Studio bug? Asp.Net bug?
Per MilkyWayJoe's request: here's the code in the controller:
if (!string.IsNullOrEmpty(hiddenFields))
{
profile.DisplayDBAField = !hiddenFields.Contains("DBA");
profile.DisplayVendorIDField = !hiddenFields.Contains("VendorID");
profile.DisplayContactNameFields = !hiddenFields.Contains("ContactName");
}
The code above works fine, I step through it and the fields are set/unset correctly.
And here's the model:
public class ProfileModel
{
public EntityProfile Entity { get; set; }
public bool DisplayDBAField { get; set; }
public bool DisplayVendorIDField { get; set; }
public bool DisplayContactNameFields { get; set; }
public bool DisplayDistributionMethodField { get; set; }
public bool DisplayCardPurposeField { get; set; }
public ProfileModel()
{
DisplayDBAField = true;
DisplayVendorIDField = true;
DisplayContactNameFields = true;
DisplayDistributionMethodField = true;
DisplayCardPurposeField = true;
}
}
So the default constructor sets the flags to true, and the controller modifies the flags when appropiate. I also tried the following in the view:
<td>
#if (!Model.DisplayDBAField)
{
#Html.Raw("DBA:")
}
</td>
And found that regardless of the value in Model.DisplayDBAField, be it true or false, "DBA:" is NEVER rendered! So, whether I use #if (Model.DisplayDBAField){} or #if (!Model.DisplayDBAField){} it seems the code itself is completely ignored at runtime.
Related
I have a MVC 3 page that returns a list of user responses with a partial view called "memo" (which displays/add memos) for each response. When I add a memo to a response, it should update the db and the list of memos for that response. It should be partial page update via ajax, which effects only the partial view "memo".
The view Response.chtml that contains "memo":
#using (Html.BeginForm("Response", "User", FormMethod.Post, new { id = "UserResponse" }))
{
.... code removed ....
#foreach (var response in Model)
{
<div class="qna"><input type="text" id=#response.responseId value="#response.ResponseText" />
<div>#Html.Partial("_memo", response.responseId)</div>
}
.....
The partial page "_memo.chtml":
<div>add memo</div>
<ul id="memos">
#foreach (var memo in Model) {
<li>#memo.Text</li>
}
</ul>
<form method="post" id="memoForm"
action="#Url.Action("AddMemo")">
#Html.TextArea("Memo", new { rows = 5, cols = 50 })
<br />
<input type="submit" value="Add" />
</form>
Controller for view User/Response:
[HttpGet]
public ActionResult Response(id)
{
.....
return View(responses);
I just started with the code above, need help filling the blanks.
If I pass the response Id to the partial view, how do I pull the list of memos for that response? Will it involve ajax? (instead of ..Partial("_memo", response.memos))
How do I update the partial view via ajax call. What is ajax call (sample code) on the client side and how would the controller look? When the ajax call is successful, how do I update the list memos div="memos" to reflect the new memo?
Will the form action from Response conflict with form action of the partial view Memo?
Answers to Questions:
You shouldn't pass the responseId to the partial, you should pass the memo collection from your response object and make your partial view strongly typed to that collection.
See full code example below.
You don't need the form in the partial since you're making a simple ajax call to add the new memo. See full code example below.
This is a modified example from a project I am currently working on:
There is a bit of code to follow, so here goes:
This is my model. There are several sections on a career planning form, one of which is a section to select and update competencies. The SelectCompetencies model has a collection of competencies within it. The user will have the ability to add competencies. When they do, it will be added to the database and will update the list of competencies in the partial.
public class CareerPlanningFormViewModel
{
// code removed ...
public SelectCompetenciesModel SelectCompetencies { get; set; }
// code removed ...
}
public class SelectCompetenciesModel
{
public int CareerPlanningFormID { get; set; }
public IList<CompetencyModel> Competencies { get; set; }
public byte MaximumCompetenciesAllowed { get; set; }
}
public class CompetencyModel
{
public int CompetencyID { get; set; }
public int? CompetencyOptionID { get; set; }
public string ActionPlan { get; set; }
public IDictionary<int, string> CompetencyOptions { get; set; }
}
The main view of the career planning form: /Views/CPF/CareerPlanningForm.cshtml
#model MyNamespace.Models.CareerPlanningForm.CareerPlanningFormViewModel
<link rel="stylesheet" href="#Url.Content("~/Content/CreateCPF.css")" />
#using (Html.BeginForm())
{
// other sections loaded here...
// code removed for brevity...
#Html.Partial("SelectCompetencies", Model.SelectCompetencies)
// other sections loaded here...
// code removed for brevity...
}
The SelectCompetencies partial: /Views/CPF/SelectCompetencies.cshtml
The user will fill in the new action plan text and click the add competency button.
That will post via ajax to CPFController/NewCompetencyTemplate
#model MyNamespace.Models.CareerPlanningForm.SelectCompetenciesModel
#Html.HiddenFor(m => m.CareerPlanningFormID)
<h3>Select Competencies</h3>
<p class="guidance">
Select up to #Model.MaximumCompetenciesAllowed competencies to focus on improving.
</p>
<table id="CompetenciesTable">
<thead>
<tr>
<th>Competency</th>
<th>Action Plan:</th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < Model.Competencies.Count(); i++)
{
#Html.EditorFor(m => m.Competencies[i])
}
</tbody>
<tfoot id="CompetenciesTableFooter" class="#(Model.Competencies.Count() < Model.MaximumCompetenciesAllowed ? "" : "hidden")">
<tr>
<td colspan="2">
#Html.TextArea("NewActionPlanText")
#Html.Button(ButtonType.Button, "Add Another Competency", "add", new { id = "AddCompetencyButton" })
</td>
</tr>
</tfoot>
</table>
#section script
{
<script>
jQuery(document).ready(function ($) {
var competenciesTableBody = $('#CompetenciesTable tbody'),
competenciesTableFooter = $('#CompetenciesTableFooter'),
addCompetencyButton = $('#AddCompetencyButton'),
newCompetencyTemplateUrl = '#Url.Content("~/CPF/NewCompetencyTemplate")',
count = competenciesTableBody.find('tr').length,
newActionPlanText = $('#NewActionPlanText'),
careerPlanningFormID = $('#CareerPlanningFormID');
addCompetencyButton.click(function () {
$.ajax({
url: newCompetencyTemplateUrl(),
type: 'POST',
data: {
careerPlanningFormID: careerPlanningFormID,
actionPlan: newActionPlanText,
itemCount: count
},
dataType: 'html',
success: function (data) {
var elements = $(data);
// other code removed here...
competenciesTableBody.append(elements);
// other code removed here...
}
});
});
});
</script>
}
Views/CPF/EditorTemplates/CompetencyModel.cshtml
#model MyNamespace.Models.CareerPlanningForm.CompetencyModel
<tr class="competency">
<td>
#Html.DropDownListFor(m => m.CompetencyOptionID, new SelectList(Model.CompetencyOptions, "Key", "Value"), "Select competency...")
</td>
<td>
#Html.TextAreaFor(m => m.ActionPlan, new { #class = "competencyActionPlan" })
#Html.HiddenFor(m => m.CompetencyID)
</td>
</tr>
The controller containing the action to add the new competency: /Controllers/CPFController.cs
This will call the CareerPlanningFormService to add the new competency and will return a partial view for NewCompetencyTemplate that will render out the new competency
public class CPFController : Controller
{
private readonly ICareerPlanningFormService careerPlanningFormService;
public CPFController(ICareerPlanningFormService careerPlanningFormService)
{
this.careerPlanningFormService = careerPlanningFormService;
}
[HttpPost]
public PartialViewResult NewCompetencyTemplate(int careerPlanningFormID, int itemCount, string newActionPlanText)
{
var count = itemCount + 1;
// Even though we're only rendering a single item template, we use a list
// to trick MVC into generating fields with correctly indexed name attributes
// i.e. Competencies[1].ActionPlan
var model = new SelectCompetenciesModel
{
Competencies = Enumerable.Repeat<CompetencyModel>(null, count).ToList()
};
model.Competencies[count - 1] = this.careerPlanningFormService.BuildNewCompetencyModel(careerPlanningFormID, newActionPlanText);
return this.PartialView(model);
}
}
My service class: CareerPlanningFormService.cs
This handles the business logic and makes the calls to the repository to add the item to the database and returns a new CompetencyModel
public class CareerPlanningFormService : ICareerPlanningFormService
{
private readonly IMyRenamedRepository repository;
private readonly IPrincipal currentUser;
public CareerPlanningFormService(
IMyRenamedRepository repository,
IPrincipal currentUser)
{
this.repository = repository;
this.currentUser = currentUser;
}
public CompetencyModel BuildNewCompetencyModel(int careerPlanningFormID, string newActionPlanText)
{
var competency = new Competency
{
CareerPlanningFormID = careerPlanningFormID,
CompetencyOptionID = null,
ActionPlan = newActionPlanText
};
this.repository.Add(competency);
this.repository.Commit();
return new CompetencyModel
{
CompetencyID = competency.CompetencyID,
CompetencyOptionID = competency.CompetencyOptionID,
ActionPlan = competency.ActionPlan,
CompetencyOptions = this.GetCompetencyOptionsForCareerPlanningFormID(careerPlanningFormID)
};
}
}
Now, the partial for NewCompetencyTemplate: Views/CPF/NewCompetencyTemplate.cshtml
This is very simple, it simply renders the same editor template as above, for the last competency in the collection (which we just added)
#model MyNamespace.Models.CareerPlanningForm.SelectCompetenciesViewModel
#Html.EditorFor(m => m.Competencies[Model.Competencies.Count() - 1])
When the ajax call succeeds, it will receive this partial back from the controller action method it called. It then takes the partial and appends it to the competencies table body
// snippet from ajax call above
competenciesTableBody.append(elements);
I hope this helps. Let me know if you have any additional questions.
While you're correct that you can do it just by returning a partial view containing the updated content, you may also consider using jQuery's load method.
Look here, in particular at the "loading page fragments" section. Basically you can just get the original page again and jQuery will "extract" the content you want as long as it can be targetted by a selector (such as a div id).
Note, this solution is not suitable in all cases as there will be redundant markup in the response from the server because you will be discarding the rest of the page content and just using the updated part.
I have a partialview [_SearchProduct] within the main view, let's say [product] view. The Partialview has a number of checkboxes segregated into different sections like search by company,search by product etc. with one [search] button.
A User can select multiple checkboxes. When user clicks [search] button I need to pass ids of all selected checkbox to controller action and re-render the page again considering the user's selection . Please guide me how to pass selected checkbox ids to my controller action.
My partial view is something like below:
<fieldset>
<legend>By Company</legend>
<table style="border-style: none;">
<tr>
#{
int i = 0;
foreach (var item in Model.CompanyName)
{
i = i + 1;
<td style="border-style: none;text-decoration:none;" >
#Html.CheckBox("chkCompany",new {id="chkCompany_" + Model.CompanyId.Tostring()}) #Model.CompanyName
</td>
if (i == 5)
{
#:</tr><tr>
i = 0;
}
}
}
</tr>
</table>
</fieldset>
<fieldset>
<legend>By Product</legend>
<table style="border-style: none;">
<tr>
#{
i = 0;
foreach (var item in Model.Product)
{
i = i + 1;
<td style="border-style: none;text-decoration:none;" >
#Html.CheckBox("chkProduct",new {id="chkProduct_" + Model.CompanyId.Tostring()}) #Model.ProductName
</td>
if (i == 10)
{
#:</tr><tr>
i = 0;
}
}
}
</tr>
</table>
</fieldset>
checkboxes are dynamic
Checkbox id represent the primarykey of respective table based on which i do filtering.
Please guide me>>
So it sounds like you have a structure containing names (of companies/products), and ids.
I would create a View Model structure that looked like
public class PartialViewModel //Make sure this is included in your main view model
{
public List<ObjectsToInclude> Companies { get; set; }
public List<ObjectsToInclude> Products { get; set; }
}
public class ObjectsToInclude //Give this a better name
{
public string Name { get; set; }
public string Id { get; set; }
public bool Include { get; set; }
}
Then in order to bind them you could do
for (int i =0; i<Model.Companies.Count(); i++)
{
<td style="border-style: none;text-decoration:none;" >
#Html.HiddenFor(m => m.Companies[i].Id)
#Html.CheckBoxFor(m => m.Companies[i].Include) #Model.Companies[i].Name
</td>
if (i == 5)
{
#:</tr><tr>
i = 0;
}
}
Then provided your post takes a parameter of PartialViewModel (or some MainViewModel where that contains an instance of PartialViewModel), you'll have lists of companies and products binded. You can loop through the list, and take the respective ids of anything checked to be included.
Edit: If you wanted a single comma separated array to be posted, it would be possible by by creating an onclick event for your checkboxes, and then setting a value of a hidden input every time a checkbox is clicked. But then your code would only work with JavaScript enabled. If you need a comma separated string, you can create it server side with the view model I suggested.
string companyIds = String.Join(",", model.Companies
.Where(company => company.Include)
.Select(company => company.Id));
http://dotnetnsqlcorner.blogspot.in/2012/09/multiple-checkboxes-in-mvc-3-and-post.html
There are already several good discussions about how model properties set in the form post controller won't show up in view because of model state. To take the discussion a step further I have an example where items in the VIEW are updated but the model is not, again due to Model state. That's right, what your user sees will NOT match the model properties that are returned in the post!
say you have a model with a list
public class FruitBasket {
public string OwnersName { get; set; }
public IEnumerable<Fruit> Fruits { get; set; }
public string FruitColor { get; set; }
public FruitBasket() {
this.OwnersName = "Bob";
this.FruitColor = "Red";
}
}
public class Fruit {
public string Name { get; set; }
public string Color { get; set; }
}
And a data access class has methods that retrieves a list of fruits based on color
Data Access code
public IEnumerable<Fruit> GetFruits(string color) {
if (color == "Red") {
List<Fruit> fruits = new List<Fruit> {
new Fruit { Name = "Apple", Color = "Red" },
new Fruit { Name = "Grape", Color = "Red" }
};
return fruits;
} else {
List<Fruit> fruits = new List<Fruit> {
new Fruit { Name = "Banana", Color = "Yellow"},
new Fruit { Name = "Apple", Color = "Red" },
new Fruit { Name = "Grape", Color = "Red" }
};
return fruits;
}
}
Controller (where db is the data access class)
public ActionResult FruitBasket() {
FruitBasket basket = new FruitBasket();
basket.Fruits = db.GetFruits("Red");
return View(basket);
}
[HttpPost]
public ActionResult FruitBasket(FruitBasket basket) {
basket.Fruits = db.GetFruits("All");
return View(basket);
}
View
#model GEWeb.Models.FruitBasket
<!DOCTYPE html>
<html>
<head>
<title>FruitBasket</title>
</head>
<body>
#using (Html.BeginForm()) {
<p>#Html.DisplayFor(model => Model.OwnersName)</p>
<table>
#Html.EditorFor(model => model.Fruits)
</table>
<input type="submit" value="filter" />
}
</body>
</html>
Editor Template
(the template for editorfor is in views/shared/EditorTemplates)
the hiddenfor helpers are included so that the model will be populated with list data on post back
#model GEWeb.Models.Fruit
<tr>
<td>
#Html.DisplayFor(model => model.Name)
#Html.HiddenFor(model => model.Name)
</td>
<td>
#Html.DisplayFor(model => model.Color)
#Html.HiddenFor(model => model.Color)
</td>
<td>
#Html.CheckBoxFor(model => model.Remove)
</td>
</tr>
Scenario
- The user requests the page and sees the list of red fruits.
- The user clicks the filter button, the post controller loads all fruits, the user sees a list of all three fruits
- The user clicks the filter button a second time. Now inspect the basket properties as passed to the post controller, the list will not match what the user saw.
Now imagine that you wanted to use that checkbox to select fruits to remove from the basket. You could pass the basket.fruits model to a method in your data access class which would delete the fruits and then you could have your conroller reload the basket.fruits list. But it will not work because the list returned to the controller does not match what the user is seeing.
This "feature" can be subverted by putting the following into the Post controller
ModelState.Clear();
But realy, I shouldn't have to. Views and controllers should pass the model back and forth accurately. ModelState is an attempt to persist View properties between page loads and that doesn't seem to be in keeping with the MVC phylosophy where state is managed by the database, and not the view!
I have an issue with my view where on HTTP POST the view model returns null for all of my properties.
Below is my view model.
public class CustomerVM
{
public List<CustomerCDTO> customerCDTO { get; set; }
}
In the above view model I have created a List<CustomerCDTO> property. The CustomerCDTO class definition is as follows.
public class CustomerCDTO
{
public string Name { get; set; }
public bool Active { get; set; }
public bool? IsChecked { get; set; }
}
Below is my view:
<%foreach (var item in Model.customerCDTO) {%>
<tr>
<td style="text-align: center; width: 10%;" class="table-content-middle">
<%if (item.Active == true)
{%>
<%=Html.CheckBoxFor(m=>item.Active)%>
<%}
else
{ %>
<%=Html.CheckBoxFor(m=>item.Active)%>
<%}%>
</td>
<td class="table-content-middle" align="center" style="width: 80%;">
<%: item.Name%>
</td>
</tr>
<%} %>
When I perform an HTTP GET everything works as expected but on POST I am getting null for CustomerVM.customerCDTO.
Please suggest what should I do to make it work.
thanks,
That's because you are not getting to each CustomerCDTO with expressions containing the information that it's part of a List.
Use a for loop instead:
<%for (var i = 0; i < Model.customerCDTO.Count; ++i)
And refer to the elements with expressions like
<%=Html.CheckBoxFor(m => m.customerCDTO[i].Active)%>
Basically you need to have the expression m => ... resolve to the property you are interested in starting from m, not from some other variable.
I have created one page in MVC 3.0 Razor view.
Create.cshtml
#model LiveTest.Business.Models.QuestionsModel
#*<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>*#
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<table cellpadding="1" cellspacing="1" border="0">
<tr>
<td>#Html.LabelFor(model => model.TestID)
</td>
<td>
#Html.DropDownListFor(model => model.TestID, (IEnumerable<SelectListItem>)ViewBag.ItemIDList)#Html.ValidationMessageFor(model => model.TestID)
</td>
</tr>
<tr>
<td>#Html.LabelFor(model => model.Question)
</td>
<td>#Html.EditorFor(model => model.Question)#Html.ValidationMessageFor(model => model.Question)
#Html.HiddenFor(model => model.QuestionsID)
</td>
</tr>
<tr>
<td>#Html.LabelFor(model => model.IsRequired)
</td>
<td>#Html.CheckBoxFor(model => model.IsRequired)#Html.ValidationMessageFor(model => model.IsRequired)
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="submit" value="Submit" />
</td>
</tr>
</table>
}
QuestionsController.cs
public class QuestionsController : Controller
{
#region "Attributes"
private IQuestionsService _questionsService;
#endregion
#region "Constructors"
public QuestionsController()
: this(new QuestionsService())
{
}
public QuestionsController(IQuestionsService interviewTestsService)
{
_questionsService = interviewTestsService;
}
#endregion
#region "Action Methods"
public ActionResult Index()
{
return View();
}
public ActionResult Create()
{
InterviewTestsService _interviewService = new InterviewTestsService();
List<InterviewTestsModel> testlist = (List<InterviewTestsModel>)_interviewService.GetAll();
ViewBag.ItemIDList = testlist.Select(i => new SelectListItem() { Value = i.TestID.ToString(), Text = i.Name });
return View();
}
[HttpPost]
public ActionResult Create(QuestionsModel questions)
{
if (ModelState.IsValid)
{
_questionsService.Add(questions);
return RedirectToAction("Index");
}
InterviewTestsService _interviewService = new InterviewTestsService();
List<InterviewTestsModel> testlist = (List<InterviewTestsModel>)_interviewService.GetAll();
ViewBag.ItemIDList = testlist.Select(i => new SelectListItem() { Value = i.TestID.ToString(), Text = i.Name });
return View(questions);
}
#endregion
}
QuestionsModel.cs
public class QuestionsModel : IQuestionsModel
{
[ReadOnly(true)]
public Guid QuestionsID { get; set; }
[Required]
[DisplayName("Question")]
public string Question { get; set; }
[DisplayName("Test ID")]
public Guid TestID { get; set; }
[DisplayName("Is Required")]
public bool IsRequired { get; set; }
[DisplayName("Created By")]
public Guid CreatedBy { get; set; }
}
Problem:
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
If I am adding the above two lines in Create.cshtml page and then I press submit button then it will fire validation message "Question is required!" if I am entering value in *Question field and then press submit button my [HttpPost]Create Method never execute.*
If I remove the above two lines from page then press submit button then it will execute [HttpPost]Create Method and fire validation from server side if I am entering value in Question field then also [HttpPost]Create executed.
Please help me.
The QuestionsModel class includes a property CreatedBy which is not included in your View.
Try either adding CreatedBy as a hidden field, or (better yet) remove CreatedBy from the QuestionsModel class, since it is not an attribute which should be exposed in the view.
I suspect that this missing property is the cause of the problem.
UPDATE
I ran some tests on your code, and it was not the CreatedBy property. Rather, your problem is that you are not supplying a QuestionsID value, but you included a hidden field for QuestionsID on the form.
Because QuestionsID is a value type, by default, the DataAnnotationsModelValidatorProvider adds a Required validator to the QuestionsID field. Because the field did not have a ValidationMessage, you could not see the validation error.
You can override the behavior of the default DataAnnotationsModelValidatorProvider by following the instructions in my answer here.
I would check if any client side errors occurred when trying to submit the form. Check it from the browser console.
Also, make sure that you have completed your code with no validation errors before submitting the form.
Are you saying that the form doesn't validate client side and nothing ever get's POSTed back to your server?
Meaning, you click the submit button and nothing happens in the browser, correct?
The problem might be that your form isn't validating with the unobtrusive javascript library validation.