Kendo DropDownListFor() with ASP.NET-MVC - kendo-ui

i have a problem into the ASP.NET-MVC Helper
I have a form that give a POST into action **create of the controller Occurrence passing a parameter of type occurrence that corresponding at the Model of the view where the form is inserted, for register the occurrence is needed an TypeOccurrenceID, i'm trying to get this value using Html.DropDownListFor(), but this not working when the form is posted, the Occurrence past in the parameter don't have
the OccurrenceTypeId corresponding with the OccurrenceType selected in the DropDownList
Someone had the same problem?
This is my Controller action
[HttpPost]
public ActionResult Create(Occurrence occurrence)
{
if (ModelState.IsValid)
{
try
{
db.Add<Occurrence>(occurrence);
return new HttpStatusCodeResult(200);
}
catch (Exception)
{
return new HttpStatusCodeResult(400);
}
}
return new HttpStatusCodeResult(400);
}
Here is my View
#using Common.Util
#using Common.Util.Configuration
#using CafData
#model Occurrence
<div class="box-form">
#using (Ajax.BeginForm("Create", "Occurrence",
new AjaxOptions
{
OnSuccess = "OnSuccess()",
OnFailure = "OnFailure()"
}))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
#*Area*#
<div class="row-fluid details-field">
#(Html.Kendo().DropDownList()
.Name("areas")
.HtmlAttributes(new { style = "width:300px" })
.OptionLabel("Selecione uma area...")
.DataTextField("Description")
.DataValueField("IdArea")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("readAreasForDropDown", "Area");
});
})
)
#*Occurrence type*#
#(Html.Kendo().DropDownListFor(m => m.OccurrenceTypeId)
.Name("occurrencetype")
.HtmlAttributes(new { style = "width:300px" })
.OptionLabel("Select a occurrence type...")
.DataTextField("Description")
.DataValueField("OccurrenceTypeId")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("lerOccurrenceTypeForDropDown",
"OccurrenceType").Data("filterArea").
Type(HttpVerbs.Post);
})
.ServerFiltering(true);
})
.Enable(false)
.AutoBind(false)
.CascadeFrom("areas")
)
<script>
function filterArea() {
return {
id: $("#areas").val()
};
}
</script>
<button class="k-button">Save</button>
}
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Sorry for the bad english!

The problem was the name of the dropdownlist, it must be the same name as the property of the model that you want bind.
Example:
#(Html.Kendo().DropDownListFor(m => m.OccurrenceTypeId)
.Name("OccurrenceTypeId")
Alternative:
The name property is not actually necessary when using DropDownListFor. So just removing this line would work as well:
.Name("occurrencetype")

Related

net core dynamic site - main element not found error

I have site - user choose option from dropdown, depends oh his select site must to be generated. I use JS and blazor. I have 404 error. I tried to adapted this way: Populate DropDownList from another DropDownList
View:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
#model IEnumerable<Article>
#section Scripts{
<script>
function load() {
var e = document.getElementById('titles');
var id = e.options[e.selectedIndex].value;
var Id = parseInt(id);
//C: \Users\patryk\source\repos\Blog\Controllers\Dashboard\EditPartialViewController.cs
alert(Id);
$('#container').load("/Dashboard/EditPartialViewController/_tableSeeder?id="+Id);
}
</script>
}
<h1>Edit</h1>
<form id="id_select" >
<label for="article">Choose an article to edit:</label>
<select id="titles" onchange="load()">
#foreach (var x in Model)
{
<option value=#x.Id>#x.Title</option>
}
</select>
<br><br>
There is my partialView:
#model List<Article>
#foreach (var item in Model)
{
<option value="#item.Id">
#item.Title
</option>
}
Controller for partial view:
namespace Blog.Controllers.Dashboard
{
public class EditPartialViewController : Controller
{
private ApplicationDbContext context;
public EditPartialViewController(ApplicationDbContext _context)
{
context = _context;
}
public IActionResult _tableSeeder(int id)
{
List<Article> model = context.Articles.Where(x => x.Id == id).ToList();//list with only one element
return PartialView(model);
}
}
}
WebBrowser gives me 2 errors:
GEThttps://localhost:44336/Dashboard/EditPartialViewController/_tableSeeder?id=14
[HTTP/2 404 Not Found 7ms]
and second one:
XML error - main element not found (or sth like that)
EDIT: my routing:
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
endpoints.MapRazorPages();
endpoints.MapControllerRoute(
name: "Dashboard",
pattern: "{controller=Dashboard}/{action=Dashboard}");
endpoints.MapRazorPages();
//added for block registration
endpoints.MapGet("/Identity/Account/Register", context => Task.Factory.StartNew(() => context.Response.Redirect("/Identity/Account/Login", true, true)));
endpoints.MapPost("/Identity/Account/Register", context => Task.Factory.StartNew(() => context.Response.Redirect("/Identity/Account/Login", true, true)));
});

How do I correctly use EditorFor to display checkbox selections from an AJAX call, and POST the selections?

My question is two-fold.
I have a View that gets data on the change of a drop down selection.
The data retrieved is a List property of a ViewModel class using an Ajax call.
This data is shown as a selection of check boxes for the user to select any number of them.
If I return a Partial View from an AJAX call, this is easy enough, but from what I have experienced, this doesn't work for POST'ing back to the controller. Nothing is bound correctly.
From what I have read the correct way is to use EditorFor, So firstly, I cannot figure out how to populate the EditorFor from the AJAX call.
Secondly, If I test by sending initial data from my GET, the EditorFor displays the correct checkbox options, but when I POST, the count of the items is 0.
View:
#model EngineeringAssistantMVC.Controllers.FirmwareController.FirmwareViewModel
#using (Html.BeginForm("Upload", "Firmware", FormMethod.Post, new { #id = "uploadFirmwareForm", #class = "form-horizontal" }))
{
<!-- Device -->
<div class="form-group">
<div class="col-lg-1">
#Html.LabelFor(x => x.Device, htmlAttributes: new { #class = "control-label" })
</div>
<div class="col-lg-2">
#Html.DropDownListFor(x => x.Device, ViewBag.Devices as IEnumerable<SelectListItem>, new { #class = "form-control", #id = "Devices" })
</div>
<div class="col-lg-9">
#Html.ValidationMessageFor(x => x.Device, "", new { #class = "text-danger" })
</div>
</div>
#Html.EditorFor(x => x.SelectedModels, "SelectedModels", new { #id = "Models" })
#Html.HiddenFor(x => x.SelectedModels)
}
And the AJAX call:
function GetModels() {
$.ajax({
type: "GET",
url: '#Url.Action("GetModels", "Firmware", null)',
data: { SelectedDevice: $('#Devices').val() },
success: function (dataSet) {
//$('#Models').html(dataSet);
//$('#Models').data(dataSet);
//$('#Models').val(dataSet);
// How do I populate the EditorFor from the dataSet returned?
},
error: function (err) {
console.log("ERROR: " + err.responseText);
},
})
}
SelectedModels EditFor Template:
#model IEnumerable<EngineeringAssistantMVC.ViewModels.ModelViewModel>
#foreach (var item in Model)
{
#Html.CheckBoxFor(x => item.IsSelected)
#Html.Label(item.Description)
#Html.HiddenFor(x => item.ModelId)
#Html.HiddenFor(x => item.IsSelected)
#Html.HiddenFor(x => item.Description)
}
Controller:
[HttpPost]
public ActionResult Upload(HttpPostedFileBase uploadFile, FirmwareViewModel firmwareViewModel)
{
// firmwareViewModel.SelectedModels count is 0 here
}
ModelFirmware Class:
public class ModelFirmware
{
public int ModelFirmwareId { get; set; }
public int FirmwareId { get; set; }
public int ModelId { get; set; }
}
FirmwareViewModel:
public class FirmwareViewModel
{
public int FirmwareViewModelId { get; set; }
[Required]
public string Device { get; set; }
public ICollection<ModelViewModel> SelectedModels { get; set; }
}
I just can't get it to work correctly.
EDIT 1: - Add method that returns the models
[HttpGet]
public ActionResult GetModels(string SelectedDevice)
{
var deviceAbbreviation = _dbContext.Radios.Where(x => x.RadioName == SelectedDevice).Select(x => x.ProjectAbbreviation).FirstOrDefault();
var models = _dbContext.AnatomyModels.Where(x => x.SerialPrefix.StartsWith(deviceAbbreviation.Trim()) && x.ParentId == 0).ToList();
List<ModelViewModel> mvms = models.Select(x => new ModelViewModel()
{
ModelId = x.AnatomyModelId,
Description = x.SerialPrefix,
IsSelected = false,
}).ToList();
return Json(mvms);
}
There are numerous issues with your code.
First your not using the EditorTemplate correctly. Change its name to ModelViewModel.cshtml to match the name of the class, and locate it in the /Views/Shared/EditorTemplates (or /Views/YourControllerName/EditorTemplates) folder. The template is then based on a single object (note also the LabelFor() required to create a label associated with the checkbox, and you need to delete the hidden input for IsSelected)
#model ModelViewModel
#Html.CheckBoxFor(m => m.IsSelected)
#Html.LabelFor(m => m.IsSelected, Model.Description)
#Html.HiddenFor(m => m.ModelId)
#Html.HiddenFor(m => m.Description)
Refer also Post an HTML Table to ADO.NET DataTable to understand why your foreach loop would never have created the correct name attributes for model binding.
Then in the main view use
<div id="container">
#Html.EditorFor(m => m.SelectedModels)
</div>
and remove the hidden input for SelectedModels (but before you do, inspect the html for that element to understand why its value would never bind). The EditorFor() method will correctly generate the html for each item in your collection.
Next, change your GetModels() method to return a partial view based on FirmwareViewModel since that is what you will be posting back. Note that you could return a JsonResult, but that would mean generating a whole lot of html in the ajax call back that would not be strongly typed.
[HttpGet]
public PartialViewResult GetModels(string SelectedDevice)
{
var deviceAbbreviation = _dbContext.Radios.Where(x => x.RadioName == SelectedDevice).Select(x => x.ProjectAbbreviation).FirstOrDefault();
var models = _dbContext.AnatomyModels.Where(x => x.SerialPrefix.StartsWith(deviceAbbreviation.Trim()) && x.ParentId == 0).ToList();
List<ModelViewModel> mvms = models.Select(x => new ModelViewModel()
{
ModelId = x.AnatomyModelId,
Description = x.SerialPrefix,
IsSelected = false, // not really necessary since its the default
}).ToList();
FirmwareViewModel model = new FirmwareViewModel
{
SelectedModels = mvms
};
return PartialView(model);
}
and your GetModels.cshtml view will be
#model FirmwareViewModel
#Html.EditorFor(m => m.SelectedModels)
Then, modify your ajax call to add the partial view in the success callback
$.ajax({
type: "GET",
url: '#Url.Action("GetModels", "Firmware")', // do not need to add 3rd parameter
data: { SelectedDevice: $('#Devices').val() },
success: function (response) {
$('#container').html(response);
},
error: function (err) {
console.log("ERROR: " + err.responseText);
},
})
The .html() function will replace any elements already existing in the <div id="container"> element
Finally, since your using a view model, make use of it and do not use ViewBag. Your view model should contain a IEnumerable<SelectListItem> Devices property which you populate in the GET method (and use #Html.DropDownListFor(x => x.Device, Model.Devices, new { #class = "form-control" }) in the view (note also that the method generates id="Device"). It should also contain a HttpPostedFileBase property to avoid the additional parameter in the POST method, and allow you to add validation attributes.

KendoUI Grid - ForeignKey column not working in PopUp edit mode

I've searched for all over the place (understatement) for a solution to my case to no avail until now. First, I'll explain my scenario:
I have an OpenAccess Model exposed as a WCF Data Service (oData v3);
I have an Kendo MVC Application;
I have a View with a grid, set for PopUp editing, AJAX Bound;
Before posting some code, let me explain my issue/difficulty. I have an entity with these properties:
TextoID
Titulo;
Corpo;
TipoTextoID;
TipoTexto;
There is a ForeignKey column set to the TipoTextoID property which get's correctly populated either in in-line or pop-up mode. But when it comes to changing data, it only works in-line mode. This is my issue I need it to work in a popup, since the "Corpo" property is bound to a KEndoUI Editor.
When in the popup, it does not show the correct value on the dropdown neither changes it when we select it.
Honestly I'm feeling stupid. I tried almost every sample, post, article I could find to no avail and I'm clueless.
I hope someone can help me on this. Thanks in advance to all!
So, here's the code.
The view:
#model IEnumerable<KendoMVC.CostSimulatorService.Texto>
#{
ViewBag.Title = "Textos";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Textos</h2>
#(Html.Kendo().Grid(Model) // Bind the grid to the Model property of the view
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.Titulo); //Create a column bound to the "ProductID" property
//columns.Bound(p => p.IsPrivado).ClientTemplate("<input type='checkbox' #= IsPrivado ? checked='checked': '' # class='chkbx' />"); //Create a column bound to the "ProductName" property
columns.Template(#<text></text>).ClientTemplate("<input type='checkbox' #= IsPrivado ? checked='checked': '' # class='chkbx' />"); //Create a column bound to the "ProductName" property
//columns.Bound(p => p.TiposTexto);
columns.ForeignKey(p => p.TipoTextoID,
(System.Collections.IEnumerable)ViewData["TiposTexto"],
"TipoTextoID",
"Designacao")
.Title("Tipo de texto").Width(150);
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(200);
})
.ToolBar(commands => commands.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("Texto"))
.DataSource(dataSource => dataSource
.Ajax() //specify server type
.Model(model =>
{
model.Id(texto => texto.TextoID); // Specify the property which is the unique identifier of the model
model.Field(texto => texto.TextoID).Editable(false); // Make the ProductID property not editable
})
.Create(create => create.Action("CreateTexto", "BackOffice"))
.Read(read => read.Action("ReadTextos", "BackOffice"))
.Update(update => update.Action("UpdateTexto", "BackOffice"))
.Destroy(destroy => destroy.Action("DestroyTexto", "BackOffice")))
.Pageable() // Enable paging
.Sortable() // Enable sorting
.Selectable()
.Filterable()
.Scrollable()
)
<script type="text/javascript">
$(document).ready(function() {
$("form.k-edit-form").kendoValidator();
});
</script>
Next, then template:
#using System.Web.Mvc.Html;
#model KendoMVC.CostSimulatorService.Texto
Introduza o conteúdo que deseja
#Html.HiddenFor(model => model.TextoID)
<div id="divWrapper" style="width:99%; float:left;">
<div>
#Html.LabelFor(model => model.Titulo)
</div>
<div>
#Html.EditorFor(model => model.Titulo)
#Html.ValidationMessageFor(model => model.Titulo)
</div>
<div>
#Html.LabelFor(model => model.Corpo)
</div>
<div>
#(Html.Kendo().EditorFor(model => model.Corpo))
#Html.ValidationMessageFor(model => model.Corpo)
</div>
<div>
#Html.LabelFor(model => model.TipoTextoID)
</div>
<div>
#*#(Html.Kendo().DropDownListFor(model => model.TiposTexto))
#Html.ValidationMessageFor(model => model.TiposTexto)*#
#(Html.Kendo().DropDownListFor(m => m.TipoTextoID)
.Name("TiposTexto")
.DataTextField("Designacao")
.DataValueField("TipoTextoID")
.BindTo((System.Collections.IEnumerable)
ViewData["TiposTexto"]))
</div>
</div>
The controller:
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using KendoMVC.CostSimulatorService;
namespace KendoMVC.Controllers
{
public partial class BackOfficeController : Controller
{
#region CRUD
#region ReadTextos
public ActionResult ReadTextos([DataSourceRequest]DataSourceRequest request)
{
CostSimulatorModel modelo = new CostSimulatorModel(new Uri(#"http://localhost:53212/CostSimulatorModelService.svc/"));
IQueryable<Texto> textos = modelo.Textos;
DataSourceResult resultado = textos.ToDataSourceResult(request);
ViewData["Textos"] = textos;
return Json(resultado, JsonRequestBehavior.AllowGet);
}
#endregion
#region CreateTexto
public ActionResult CreateTexto([DataSourceRequest]DataSourceRequest request, Texto texto)
{
if (ModelState.IsValid)
{
CostSimulatorModel modelo = new CostSimulatorModel(new Uri(#"http://localhost:53212/CostSimulatorModelService.svc/"));
// Create a new Product entity and set its properties from the posted ProductViewModel
Texto entity = new Texto
{
TextoID = texto.TextoID,
Titulo = texto.Titulo,
Corpo = texto.Corpo,
IsPrivado = texto.IsPrivado,
TipoTextoID = texto.TipoTextoID,
TiposTexto = texto.TiposTexto
};
modelo.AddToTextos(entity);
// Insert the entity in the database
modelo.SaveChanges();
// Get the ProductID generated by the database
texto.TextoID = entity.TextoID;
}
// Return the inserted product. The grid needs the generated ProductID. Also return any validation errors.
return Json(new[] { texto }.ToDataSourceResult(request, ModelState));
}
#endregion
#region UpdateTexto
public ActionResult UpdateTexto([DataSourceRequest]DataSourceRequest request, Texto texto)
{
if (ModelState.IsValid)
{
CostSimulatorModel modelo = new CostSimulatorModel(new Uri(#"http://localhost:53212/CostSimulatorModelService.svc/"));
// Create a new Product entity and set its properties from the posted ProductViewModel
var entity = new Texto
{
TextoID = texto.TextoID,
Titulo = texto.Titulo,
Corpo = texto.Corpo,
IsPrivado = texto.IsPrivado,
TipoTextoID = texto.TipoTextoID,
TiposTexto = texto.TiposTexto
};
// Attach the entity
modelo.AttachTo("Textos", entity);
modelo.UpdateObject(entity);
// Update the entity in the database
modelo.SaveChanges();
}
// Return the updated product. Also return any validation errors.
return Json(new[] { texto }.ToDataSourceResult(request, ModelState));
}
#endregion
#region DestroyTexto
public ActionResult DestroyTexto([DataSourceRequest]DataSourceRequest request, Texto texto)
{
if (ModelState.IsValid)
{
CostSimulatorModel modelo = new CostSimulatorModel(new Uri(#"http://localhost:53212/CostSimulatorModelService.svc/"));
// Create a new Product entity and set its properties from the posted ProductViewModel
var entity = new Texto
{
TextoID = texto.TextoID
//Titulo = texto.Titulo,
//Corpo = texto.Corpo,
//IsPrivado = texto.IsPrivado,
//TipoTextoID = texto.TipoTextoID
};
// Attach the entity
modelo.AttachTo("Textos", entity);
// Delete the entity
modelo.DeleteObject(entity);
// Delete the entity in the database
modelo.SaveChanges();
}
// Return the removed product. Also return any validation errors.
return Json(new[] { texto }.ToDataSourceResult(request, ModelState));
}
#endregion
#endregion
}
}
I've finally got this sorted out with the precious help from KendoUI's premium forums.
So, to stop this from happening, one should use the default editor template for the ForeignKeyColumn as an editor for the "TipoTextoID", like so:
Model:
[UIHint("GridForeignKey")]
public int EmployeeID { get; set; }
Custom popup template:
#(Html.EditorFor(m => m.EmployeeID))
instead of using #(Html.Kendo().DropDownListFor(m => m.TipoTextoID)
Hope this may help others struggling with same thing.
All the best!
In addition to Stargazer's answer (Thanks!!!), below custom popup template (Views\Shared\EditorTemplates\GridForeignKey.cshtml) worked for me.
#model object
#(
Html.Kendo().DropDownListFor(m => m)
.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
)
Also, no need of specifying custom template so do below on grid view:
.Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.PopUp))
Last clarification, add below to main grid model (not foreign key viewmodel) also name matches with custom template.
[UIHint("GridForeignKey")]

Load ValidationSummary using ajax

How to load ValidationSummary using ajax? I was trying to use MVC's ready Membership.
Simple question, but I'm stuck.
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
[RecaptchaControlMvc.CaptchaValidator]
public ActionResult Register(RegisterModel model, bool captchaValid, string captchaErrorMessage)
{
if (ModelState.IsValid)
{
// Attempt to register the user
try
{
if (captchaValid)
{
WebSecurity.CreateUserAndAccount(model.UserName, model.Password);
WebSecurity.Login(model.UserName, model.Password);
return RedirectToAction("Index", "Home");
}
ModelState.AddModelError("", captchaErrorMessage);
}
catch (MembershipCreateUserException e)
{
ModelState.AddModelError("", ErrorCodeToString(e.StatusCode));
}
}
// If we got this far, something failed, redisplay form
return View(model);
}
View:
#using (Html.BeginForm()) {
#Html.AntiForgeryToken()
#Html.ValidationSummary()
<fieldset>
<legend>Registration Form</legend>
<ol>
<li>
#Html.LabelFor(m => m.UserName)
#Html.TextBoxFor(m => m.UserName)
#Html.ValidationMessageFor(m => m.UserName)
<input type="hidden" id ="some" value=""/>
</li>etc.
I don't want to redirect each time on for example, if username exists or etc.
To do this you can return a partial view as html. The rendered partial will contain the modelstate errors and therefore will display when returned as html.
Example
Could can create a class called AjaxResult
public class AjaxResult
{
public string Html { get; set; }
public bool Success { get; set; }
}
Then in your success function from the ajax call you can append the html to the appropriate element. e.g.
$.ajax({
url: 'http://bacon/receive',
dataType: "json",
type: "POST",
error: function () {
},
success: function (data) {
if (data.Success) {
$('body').append(data.Html);
}
}
});

DropDownListFor doesn't display selected item

I'm trying to get the drop down list to have my item selected when there is an item, but it never does. I've Googled this and tried many different methods, but they all seem to use a ViewModel containing the list instead of using ViewBag, but I would like to stick to the ViewBag if possible.
My controller:
[HttpGet]
public ActionResult Index(int? id)
{
ViewBag.SelectList = new SelectList(rep.GetItemList(), "id", "type");
if (id.HasValue)
{
var model = rep.GetItemByID(id.Value);
if ( model != null )
{
return View(model);
}
}
return View();
}
My View:
<div class="editor-field">
#Html.DropDownListFor(model => model.itemID, (SelectList)ViewBag.SelectList)
#Html.ValidationMessageFor(model => model.itemID)
</div>
This doesn't have my item selected in the DropDownList, and I've also tried having a list in the ViewBag and then constructing the SelectList in the View, which some posts say should solve the problem:
<div class="editor-field">
#Html.DropDownListFor(model => model.itemID, new SelectList(ViewBag.SelectList, "id", "type", Model.itemID))
#Html.ValidationMessageFor(model => model.itemID)
</div>
But none of it seems to work. So I was wondering if there is anyone where that is able to spot what I'm doing wrong?
make sure your itemID property is set in the model you are passing to the view
if (id.HasValue)
{
var model = rep.GetItemByID(id.Value);
model.itemID=id.Value;
return View(model);
}
I would try setting the selected value from the begining since SelectList is immutable.
[HttpGet]
public ActionResult Index(int? id)
{
if (id.HasValue)
{
ViewBag.SelectList = new SelectList(rep.GetItemList(), "id", "type", id );
var model = rep.GetItemByID(id.Value);
if ( model != null )
{
return View(model);
}
}
else
{
ViewBag.SelectList = new SelectList(rep.GetItemList(), "id", "type");
}
return View();
}
In your View use it like this:
#Html.DropDownListFor(model => model.itemID, (SelectList)ViewBag.SelectList, "Please select...")

Resources