Kendo UI Grid Popup Editor Data Binding - asp.net-mvc

I am trying to bind a list to the Popup Editor screen.
The object is coming back as...
public IEnumerable<SystemUserRole> UserRoles { get; set; }
I am trying to get the list bound to the popup editor..
<div>
#Html.LabelFor(model => model.FirstName)
</div>
<div>
#Html.EditorFor(model => model.FirstName)
#Html.ValidationMessageFor(model => model.FirstName)
</div>
<div>
#Html.LabelFor(model => model.LastName)
</div>
<div>
#Html.EditorFor(model => model.LastName)
#Html.ValidationMessageFor(model => model.LastName)
</div>
<div>
#Html.LabelFor(model => model.EmailAddress)
</div>
<div>
#Html.EditorFor(model => model.EmailAddress)
#Html.ValidationMessageFor(model => model.EmailAddress)
</div>
There is a property on the SystemUserRole that states whether it is selected or not.
What I want to show is a list of checkboxes with a label of SystemUserRole.RoleName and and the checked html property bound to the IsSelected property on the model.
Anybody have any clue how to do this?

Related

How auto retrieve data from database in mvc?

It is a create view page where i have insert supplier information and it is inserting data successfully. i want to get this data automatically when i will enter a name and it exist it will show all of the data in these field, if not exist then i will save to the table.
#model FCBook.Supplier
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Supplier</legend>
<div class="editor-label">
#Html.LabelFor(model => model.SupplierName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.SupplierName)
#Html.ValidationMessageFor(model => model.SupplierName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Email)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Email)
#Html.ValidationMessageFor(model => model.Email)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.PhoneNo)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.PhoneNo)
#Html.ValidationMessageFor(model => model.PhoneNo)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Address)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Address)
#Html.ValidationMessageFor(model => model.Address)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Area)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Area)
#Html.ValidationMessageFor(model => model.Area)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.District)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.District)
#Html.ValidationMessageFor(model => model.District)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Division)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Division)
#Html.ValidationMessageFor(model => model.Division)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Country)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Country)
#Html.ValidationMessageFor(model => model.Country)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
My controller action to this create view is
public ActionResult Create()
{
return View();
}
//
// POST: /Supplier/Create
[HttpPost]
public ActionResult Create(Supplier collection)
{
try
{
// TODO: Add insert logic here
var db = new PetaPoco.Database("FCBook");
if (collection != null)
{
collection.Insert();
}
return RedirectToAction("Index");
}
catch
{
return View();
}
}
I think you want to look into using Remote validation. It can be triggered after a user enters a value into one of your fields. I'm using this approach to populate other fields upon such an event occurring.

Adding model with user input and hard coded values

Okay so I am using the MVC framework. I have a view for adding a model. At the moment I am using the default "Create" controller.
I want to be able to create a model with my own variables pre-set. For example the model.UserId I want to set to the users Id. I want some values to be inputed by the user and I want some to be already set. Is there a way I could do something like this
(pseudo code)
model.matchId = 123
model.prediction type = "user input"
add model
here is my current code below
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Predictions</legend>
<div class="editor-label">
#Html.LabelFor(model => model.MatchId, "Match")
</div>
<div class="editor-field">
#Html.DropDownList("MatchId", String.Empty)
#Html.ValidationMessageFor(model => model.MatchId)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.UserId, "User")
</div>
<div class="editor-field">
#Html.DropDownList("UserId", String.Empty)
#Html.ValidationMessageFor(model => model.UserId)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Type)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Type)
#Html.ValidationMessageFor(model => model.Type)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Prediction)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Prediction)
#Html.ValidationMessageFor(model => model.Prediction)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
In the controller, you would set the values on the model before returning it to the View.
public class HomeController : Controller
{
public ActionResult About()
{
var model = new MyModel();
model.SomeId = 123;
model.SomeOtherProperty = "Hello World";
return View(model);
}
}

How can insert fix value in a field when creating a new row

I am working on asp.net mvc3. I have designed database in SQL Server. And I access database using ado.net, I am designing a "CREATE" page.
This is my view.cshtml
#model CalcoWOMS.Models.ProductFormulation
#{
ViewBag.Title = "doProductFormulation";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<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)
<fieldset>
<legend>ProductFormulation</legend>
<div>
#Html.EditorFor(model => model.ProductID) <!-- i want to insert fix value (100) in this ProductID field in ProductFormulation Table -->
#Html.ValidationMessageFor(model => model.ProductID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.RawMaterialID)
</div>
<div class="editor-field">
#Html.DropDownList("RawMaterialID","SELECT")
#Html.ValidationMessageFor(model => model.RawMaterialID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Code)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Code)
#Html.ValidationMessageFor(model => model.Code)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Description)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Description)
#Html.ValidationMessageFor(model => model.Description)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.MinimumBatchSize)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.MinimumBatchSize)
#Html.ValidationMessageFor(model => model.MinimumBatchSize)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Quantity)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Quantity)
#Html.ValidationMessageFor(model => model.Quantity)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "ProductFormulationIndex")
</div>
I want to insert fixed value (100) in this ProductID field in ProductFormulation table and don't want to create editable box. What should I
do for this ?
Perhaps I don't understand the question (I'm more of a backend developer), but it seems like the simple solution is remove these two lines:
<div>
#Html.EditorFor(model => model.ProductID)
#Html.ValidationMessageFor(model => model.ProductID)
</div>
Then update the Model in your controller's Create, [post] method to update the ProductID to 100, prior to writing it out to the repository. Of course, how you'd do that depends on your controller structure, which you haven't posted.
As I understand it, the alternative would be to have a hidden field on the page and create the Model with a ProductID of 100 in the initial Create call but if you're always going to hard code the product id (which to be honest seems questionable) to 100, then this seems pointless...

Master-Detail Sample Code for MVC 3 Razor (using Ajax for details) - Part 2

I am currently showing a treeview in a left column.
When a user selects a node, i am loading the right column #details with the response from an ajax call. This works nicely.
I now want to submit the right columns #details via ajax as well. I am able to capture the post back to the server however when i return a string back to the #details section it is loading the entire page with string 'saved successfully'
I really want the string 'saved successfully' to be placed in a div element in the right column.
This is an ajax response, again doing another ajax response (which i want to return to the first ajax response).
Is this possible?
My edit form looks like the following
#using (Ajax.BeginForm("Edit", new AjaxOptions { UpdateTargetId = "#results" })) {
#Html.ValidationSummary(true)
if (Model != null) {
<fieldset>
<legend>Code</legend>
#Html.HiddenFor(model => model.CodeID)
<div class="editor-label">
#Html.LabelFor(model => model.Description)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Description)
#Html.ValidationMessageFor(model => model.Description)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Note)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Note)
#Html.ValidationMessageFor(model => model.Note)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.DateModified)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.DateModified)
#Html.ValidationMessageFor(model => model.DateModified)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.TopicID)
</div>
<div class="editor-field">
#Html.DropDownListFor(model => model.TopicID, (SelectList)ViewData["Topics"], "Select")
#Html.ValidationMessageFor(model => model.TopicID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Special)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Special)
#Html.ValidationMessageFor(model => model.Special)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Html)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Html)
#Html.ValidationMessageFor(model => model.Html)
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
<div id="results">
Status
</div>
Make sure you have included the following script to your page if you want to use the Ajax.* helpers:
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
If you don't include it there is nothing out there to make sense of the HTML5 data-* attributes emitted by the Ajax.* helper and AJAXify this form => the form performs a normal submit and renders the results.

I can delete Html.HiddenFor(model=>model.Id) and the app still works. What is it for?

If VS creates a strongly-typed view for the [HttpGet] Create, I get markup for the model as follows.
Note that the code has been simplified for the sake of brevity. The important point is that VS does NOT include Html.HiddenFor(model=>model.Id).
//Create.cshtml
#model MvcMovie.Models.Movie
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset>
<legend>Movie</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Title)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Title)
#Html.ValidationMessageFor(model => model.Title)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ReleaseDate)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ReleaseDate)
#Html.ValidationMessageFor(model => model.ReleaseDate)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
Now I create a templated HTML helper EDITOR named Movie.cshtml for the type Movie as follows.
Note that the code has been simplified for the sake of brevity. The important point is that VS DOES include Html.HiddenFor(model=>model.Id).
//Movie.cshtml
#model MvcMovie.Models.Movie
#Html.HiddenFor(model => model.Id)
<div class="editor-label">
#Html.LabelFor(model => model.Title)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Title)
#Html.ValidationMessageFor(model => model.Title)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ReleaseDate)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ReleaseDate)
#Html.ValidationMessageFor(model => model.ReleaseDate)
</div>
If I use this templated, I must change Create.cshtml as follows:
//Create.cshtml
#model MvcMovie.Models.Movie
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset>
<legend>Movie</legend>
#Html.EditorForModel()
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
The questions are:
Since the hidden field form can be deleted without any side effect, in this case, what is the hidden field for?
It adds hidden field because it doesn't know how action looks like. Action will contain parameter ID in url thus it is not required to put it into hidden field. However in template, VS doesn't know whether action will contain ID or not, so it puts there hidden field holding id to be sure.

Resources