I have a Telerik Grid in my View. I want to know if there is a way by which I can bind the Datakey of the selected row to the Model Property -
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site1.Master" Inherits="System.Web.Mvc.ViewPage<Mitek.MobileImagingTest3.Models.JobFileStatisticsModel>" %>
<% using (Html.BeginForm()) { %>
<div class="editor-label">
<br />
<label>Select Which Job:</label>
</div>
<div>
<%= Html.Telerik().Grid((IEnumerable<Mitek.MobileImagingTest3.Models.JobFileStatisticsModel>)ViewData["JobFilesDataList"])
.Name("JobFileGrid")
.EnableCustomBinding(true)
//.BindTo((IEnumerable<Mitek.MobileImagingTest3.Models.JobFileStatisticsModel>)ViewData["JobFilesDataList"])
.DataKeys(keys => keys.Add(o => o.JobFileId))
.Columns(columns =>
{
columns.Bound(o => o.JobFileId).Hidden(true);
columns.Bound(o => o.JobFileName).Title("Job File Name").Width(500);
columns.Bound(o => o.JobFileVersion).Title("Job File Version").Width(200);
columns.Bound(o => o.JobFileDateCreated).Title("Date Created").Format("{0:MM/dd/yyyy}").Width(300);
})
.HtmlAttributes(new { style = "width: 1000px; font-family:arial; font-size: .9em;" })
.ClientEvents(events => events.OnRowSelected("onRowSelected"))
.DataBinding(dataBinding => dataBinding.Ajax().Select("SelectJobFile", "Admin"))
.Pageable()
.Sortable()
.Selectable()
.RowAction(row =>
{
row.Selected = row.DataItem.JobFileId.Equals(ViewData["JobFileId"]);
//Model.JobFileId = ViewData["JobFileId"].ToString();
})
%>
</div>
<div>
</div>
<div>
<br />
<button type= "submit" name="button" class="t-button" >Run Report</button>
</div>
</div>
<% } %>
enter code here
<script type="text/javascript">
function onRowSelected(e) {
var id = e.row.cells[0].innerHTML;
alert(id);
}
</script>
My model is -
public class JobFileStatisticsModel
{
public string JobFileId { get; set; }
public string JobFileName { get; set; }
public string JobFileVersion { get; set; }
public string JobFileDateCreated { get; set; }
}
How do I bind the Datakey of the selected row in the Grid to the Model.JobFileId property?
Please help.
Thanks,
SDD
Change <Mitek.MobileImagingTest3.Models.JobFileStatisticsModel>
to <IEnumerable<Mitek.MobileImagingTest3.Models.JobFileStatisticsModel>>
Also replace
<%= Html.Telerik().Grid((IEnumerable<Mitek.MobileImagingTest3.Models.JobFileStatisticsModel>)ViewData["JobFilesDataList"])
with this line.
<%= Html.Telerik().Grid<Mitek.MobileImagingTest3.Models.JobFileStatisticsModel>(Model)
If you replace both of those it should fix your problem. This is how I am currently doing it so I think it will work. If it doesn't just leave me a message and I will see what else I can come up with.
Related
I have implemented kendo combobox on my MVC5 view and want the combobox to be filtered based on the value in my model. I need to retrieve the value from my model. I have currently bound that value to a hidden field called CountryCode in my partial view. The script is in my main view. I am getting error message undefined while trying to access the hidden field. The model is definitely getting populated with the CountryCode.
#using System.Collections
#model CC.GRP.MCRequest.ViewModels.RequestStatusUpdateViewModel
#{
Layout = null;
}
<div class="k-popup-edit-form k-window-content k-content" >
<div class="k-edit-form-container">
#Html.HiddenFor(model => model.CountryCode)
<div class="editor-label">
#Html.LabelFor(model => model.RequestID)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.RequestID, new { htmlAttributes = new { #readonly = "readonly" } })
</div>
<div class="editor-label">
#Html.LabelFor(model => model.ProjectName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ProjectName, new { htmlAttributes = new { #readonly = "readonly" } })
</div>
<div class="editor-label">
#Html.LabelFor(model => model.RequestStatus)
</div>
<div class="editor-field">
#(Html.Kendo().ComboBoxFor(model => model.RequestStatusCode)
.HtmlAttributes(new { style = "width:100%" })
.DataTextField("Status")
.Placeholder("Select...")
.DataValueField("RequestStatusCode")
.AutoBind(false)
.Filter("contains")
.DataSource(dataSource => dataSource
.Read(read =>
{
read.Action("GetRequestStatus", "Request")
.Type(HttpVerbs.Post)
.Data("GetCountryCodeFilter");
}).ServerFiltering(true)
)
)
</div>
#Html.ValidationMessageFor(model => model.RequestStatusCode, "", new { #class = "text-danger" })
</div>
</div>
Controller method that populates the combo
public ActionResult GetRequestStatus(string countryCode)
{
var response = requestRepository.GetRequestStatus(countryCode).AsQueryable().ProjectTo<RequestStatusViewModel>();
var jsonResult = Json(response, JsonRequestBehavior.AllowGet);
jsonResult.MaxJsonLength = int.MaxValue;
return jsonResult;
}
Controller method that loads the view
public ActionResult RequestStatus(int requestId, string projectName, string countryCode)
{
RequestStatusUpdateViewModel reqeustStatusUpdateViewModel = new RequestStatusUpdateViewModel();
reqeustStatusUpdateViewModel.RequestID = requestId;
reqeustStatusUpdateViewModel.ProjectName = projectName;
reqeustStatusUpdateViewModel.CountryCode = countryCode;
if (!ModelState.IsValid)
{
// return View("NewRequestView", Mapper.Map<RequestStatusViewModel>(newReqeustViewModel));
return null;
}
return View("_RequestStatusView", Mapper.Map<RequestStatusUpdateViewModel>(reqeustStatusUpdateViewModel));
}
RequestStatusViewModel
public class RequestStatusViewModel
{
public string RequestStatusCode { get; set; }
public string Status { get; set; }
public int DisplaySequenceNo { get; set; }
}
Script in the main view
function GetCountryCodeFilter() {
alert("Hello");
alert($('#CountryCode').val());
return { countryCode: $('#CountryCode').val() }
};
I'm assuming this is a popup from a kendo grid. The problem is that view gets serialized and sent to the popup when any row is clicked. It doesn't bind the data like you expect in MVC - it sends the same serialized data every time. See here.
So change your hidden to use kendo's MVVM binding so each instance gets the value from the grid row. (CountryCode needs to exist in the grid's datasource):
#Html.HiddenFor(x => x.CountryCode, new { data_bind = "value: CountryCode" }) // underscore becomes dash
Or you could just use:
<input type="hidden" name="CountryCode" id="CountryCode" data-bind = "value: CountryCode"/>
I have a model like:
public class Person
{
public int ID { get; set; }
[Required]
public string LastName { get; set; }
[Required]
public string FirstMidName { get; set; }
}
And the view:
#model ContosoUniversity.Models.Student
#using (Html.BeginForm("Edit", "Student", FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#Html.HiddenFor(model => model.ID)
<div
#Html.LabelFor(model => model.LastName, new { #class = "control-label col-md-2" })
#Html.EditorFor(model => model.LastName)
#Html.ValidationMessageFor(model => model.LastName)
</div>
<div >
#Html.LabelFor(model => model.FirstMidName, new { #class = "control-label col-md-2" })
#Html.EditorFor(model => model.FirstMidName)
#Html.ValidationMessageFor(model => model.FirstMidName)
</div>
<div>
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
}
The problem is that when I am rendering the view using Ajax Get using return PartialView("Edit", student); statement, the unobtrusive jQuery validation fails. The validation is working fine when I remove the hidden field #Html.HiddenFor(model => model.ID).
I have used below code to render the view using Ajax Get request:
function ShowEditPartialView(sender) {
$.ajax({
type: "GET",
url: "/Student/EditPartial",
data: {
id: courseid
},
async: false,
success: function (data) {
$("#EditCoursePartial").html(data);
///because the page is loaded with ajax, the validation rules are lost, we have to rebind them:
$('form').removeData('validator');
$('form').removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse('form');
}
});
}
Any idea on how it will be resolved.
I dont understand, I have my in my Controller:
[HttpGet]
public ActionResult Detail(int userId)
{
var user = ZincService.GetUserForId(userId);
if (user != null)
{
ViewBag.user = userId;
ViewBag.email = user.Email;
ViewBag.title = user.JobTitle;
ViewBag.node = user.Node;
}
return View(user);
}
then my view, Detail.aspx
<div id="user-details-view">
<div>
Title:
</div>
<div>
<%: Model.JobTitle %>
<%: Model.News %>
<%: Model.Node %>
</div>
<div>
<%: Html.ActionLink("Change Email Address", "ChangeEmailAddress", new { #id = Model.UserId })%>
</div>
</div>
when I run my app i get an error:
The resource cannot be found.
Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.
Requested URL: /Areas/Admin/Views/User/Detail.aspx
I dont understand? Is it because of syntax errors?
Previous posts are correct as in logic but you assigned the viewbag names in your controller differently. It should be:
<div id="user-details-view">
<div>
Title:
</div>
<div>
<%: ViewBag.email %>
<%: ViewBag.title %>
<%: ViewBag.node %>
</div>
<div>
<%: Html.ActionLink("Change Email Address", "ChangeEmailAddress", new { #id = ViewBag.user })%>
</div>
</div>
Hope it helps..
It must be like this
<%: ViewBag.JobTitle %>
<%: ViewBag.News %>
<%: ViewBag.Node %>
Replace the Model. with ViewBag.
<%: ViewBag.title %>
<%: ViewBag.email %>
<%: ViewBag.node %>
and also change this
<%: Html.ActionLink("Change Email Address", "ChangeEmailAddress", new { id = ViewBag.user })%>
You must use that sintax:
<%: ViewBag.email %>
<%: ViewBag.title %>
<%: ViewBag.node %>
But would be better if you use Model:
public class UserInfo
{
public int UserId { get; set; }
public string Email { get; set; }
public string Title { get; set; }
public NodeType Node { get; set; }
}
[HttpGet]
public ActionResult Detail( int userId )
{
var data = ZincService.GetUserForId( userId );
var user = new UserInfo();
if ( data != null )
{
user.UserId = userId;
user.Email = data.Email;
user.Title = data.JobTitle;
user.Node = data.Node;
}
return View( user );
}
In view (MVC3) with razor sintax:
#model UserInfo
<div id="user-details-view">
<div>
Title:
</div>
<div>
#Model.Title
#Model.Node
</div>
<div>
#Html.ActionLink("Change Email Address", "ChangeEmailAddress", new { #id = Model.UserId })
</div>
</div>
I have a problem with the following code. Basically when I call updatemodel it fails but I dont get an inner exception. If i change the drop down to a text box it works.
class:
public class Member
{
[Key]
public int MemberID { get; set; }
[StringLength(50),Required()]
public string Name { get; set; }
[Range(0,120)]
public short Age { get; set; }
[Required(),MaxLength(1)]
public string Gender {get; set;}
[Required()]
public virtual Team Team { get; set; }
}
controller methods:
[HttpGet]
public ActionResult ViewMember(int id)
{
try
{
var m = db.GetMember(id);
var maleItem = new SelectListItem{Text = "Male", Value= "M", Selected=m.Gender == "M"};
var femaleItem = new SelectListItem{Text = "Female", Value="F", Selected=m.Gender == "F"};
List<SelectListItem> items = new List<SelectListItem>();
items.Add(maleItem);
items.Add(femaleItem);
var genders = new SelectList(items, "Value", "Text");
ViewBag.Genders = genders;
return View(m);
}
catch (Exception ex)
{
return View();
}
}
[HttpPost]
public ActionResult ViewMember(Member m)
{
try
{
var member = db.GetMember(m.MemberID);
m.Team = db.GetTeam(member.Team.TeamID);
UpdateModel(member);
db.Save();
return RedirectToAction("ViewMembers", new { id = member.Team.TeamID });
}
catch (Exception ex)
{
return View();
}
}
and finally cshtml code:
#model GreenpowerAdmin.Models.Member
#using GreenpowerAdmin.Helpers
#{
ViewBag.Title = "ViewMember";
}
<h2>ViewMember</h2>
<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>Member</legend>
#Html.HiddenFor(model => model.MemberID)
<div class="editor-label">
#Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Team.Name)
</div>
<div class="editor-field">
#Html.DisplayFor(model => model.Team.Name)
#Html.ValidationMessageFor(model => model.Team.Name)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Age)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Age)
#Html.ValidationMessageFor(model => model.Age)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Gender)
</div>
<div class="editor-field">
#Html.DropDownList("Gender", ViewBag.Genders as SelectList)
#Html.ValidationMessageFor(model => model.Gender)
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "ViewMembers", new { id=Model.Team.TeamID })
</div>
When I click the save button the updatemodel line fails. As said above, it doesn't fail if I use a text box for gender. Does anyone know what is making it fail or how to debug it?
Try declaring the MemberID property as a nullable integer:
[Key]
public int? MemberID { get; set; }
I have a pretty simple MVC 2 form. It has two dropdowns, user and role. The employee dropdown passes validation, and the role dropdown does not, regardless of what I select. There is no default "empty" option although I plan to implement one, which is why I need the validation to work. It fails both client and server validation. I just can't see why one would work and one does not!
The Form:
<% using (Html.BeginForm()) {%>
<%:Html.ValidationSummary(true) %>
<%:Html.EditorFor(model => model.User, new { AllEmployees = Model.AllEmployees, RoleList = Model.RoleList })%>
<p>
<input type="submit" value="Add New User" />
</p>
<% } %>
<% Html.EndForm(); %>
The Editor Template:
<tr>
<td>
<div class="editor-label">
<%: Html.LabelFor(model => model.UserId) %>
<%: Html.RequiredMarkFor(model => model.UserId) %>
</div>
</td>
<td>
<div class="editor-field">
<%: Html.DropDownListFor(model => model.UserId, new SelectList(ViewData["AllEmployees"] as IEnumerable, "UserId", "DisplayName", Model.UserId)) %>
<%: Html.ValidationMessageFor(model => model.UserId>
</div>
</td>
</tr>
<tr>
<td>
<div class="editor-label">
<%: Html.LabelFor(model => model.AccessLevel)%>
<%: Html.RequiredMarkFor(model => model.AccessLevel)%>
</div>
</td>
<td>
<div class="editor-field">
<%: Html.DropDownListFor(model => model.AccessLevel, new SelectList(ViewData["RoleList"] as IEnumerable, Model.AccessLevel))%>
<%: Html.ValidationMessageFor(model => model.AccessLevel)%>
</div>
</td>
</tr>
The Metadata:
[DisplayName("Employee")]
[Required(ErrorMessage = "Please select an employee.")]
[StringLength(8, ErrorMessage = "User Id must be less than 8 characters.")]
[DisplayFormat(ConvertEmptyStringToNull = false,
HtmlEncode = true)]
[DataType(DataType.Text)]
public object UserId { get; set; }
// Validation rules for Access Level
[DisplayName("Role")]
[Required(ErrorMessage = "Please select the role for this user.")]
[StringLength(15, ErrorMessage = "Role must be under 15 characters.")]
[DisplayFormat(ConvertEmptyStringToNull = false,
HtmlEncode = true)]
[DataType(DataType.Text)]
public object AccessLevel { get; set; }
The Get Action:
List<String> roles = (from o in txDB.Users
select o.AccessLevel).Distinct().ToList();
var viewModel = new UserViewModel
{
User = new User(),
AllEmployees = empList,
RoleList = roles
};
return View(viewModel);
The Post Action:
[HttpPost]
[AuthorizeAttribute(Roles="Administrator")]
public ActionResult Create(User user)
{
if(!ModelState.IsValid)
{
//ModelState is invalid
return View(new User());
}
try
{
//do stuff
}
}
The Required Helper Method (from Define markup for [Required] fields in View in ASP.NET MVC 2.0):
public static string RequiredMarkFor<TModel, TProperty>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TProperty>> expression)
{
if(ModelMetadata.FromLambdaExpression(expression, helper.ViewData).IsRequired)
return "*";
else
return string.Empty;
}
Post method should be as follows to get Server side validation...
[HttpPost]
[AuthorizeAttribute(Roles="Administrator")]
public ActionResult Create(User user)
{
if(!TryUpdateModel(user))
{
// Model is INVALID
return View(user);
}
else
{
// ModelState is VALID
// Do stuff
}
}
The else might be redundant depending on what you're doing but that should get you going.
In the view above your <% using Html.BeginForm() %> you need
<% Html.EnableClientValidation(); %>
You also need to reference the scripts, MicrosoftAjax and MicrosoftMvcValidation I think
First of all: You have two closing form tags
If you use
<% using (Html.BeginForm()) {%>
<% } %>
you dont need to use this
<% Html.EndForm(); %>
Regarding your validation problem you are using an editor only for your User property, which is the only one that get binded by the model binder
<%:Html.EditorFor(model => model.User, new { AllEmployees = Model.AllEmployees, RoleList = Model.RoleList })%>
Try to replace the previous code with an EditorForModel as your Editor Template is for a model class.
So your form should change in
<% using (Html.BeginForm()) {%>
<%:Html.ValidationSummary(true) %>
<table>
<%:Html.EditorForModel()%>
</table>
<p>
<input type="submit" value="Add New User" />
</p>
<% } %>
and you're done!