I am developing my ASp.net MVC application using Kendoui MVC extensions.
So In my form I have all the kendoui grid, dropdown, datepicker etc...
I have accumulated them all in my #using(Html.BeginForm ())
But I am not sure How do i post my form data to the controller. If anybody has done that could you please shre your experience.
For example:
I have two entities: Faculty and FacultyType in My DAL
public class Faculties
{
public int FacultyId { get; set; }
public string StaffNumber { get; set; }
public int FacultyTypeId { get; set; }
public virtual FacultyTypes FacultyTypes { get; set; }
}
public class FacultyTypes
{
public FacultyTypes()
{
this.Faculties = new List<Faculties>();
}
public int FacultyTypeId { get; set; }
public string FacultyTypeCode { get; set; }
public string FacultyType { get; set; }
public bool IsDefunct { get; set; }
public virtual ICollection<Faculties> Faculties { get; set; }
}
I have my ViewModels in my application:
public class ViewModelFaculty
{
public int FacultyId { get; set; }
public string StaffNumber { get; set; }
public ViewModelFacultyTypes FacultyType { get; set; }
}
public class ViewModelFacultyTypes
{
[ScaffoldColumn(false)]
public int FacultyTypeId { get; set; }
[Required(ErrorMessage ="Faculty Type Code is Required")]
public string FacultyTypeCode { get; set; }
[Required]
public string FacultyType { get; set; }
public bool IsDefunct { get; set; }
}
My View page having kendoui extensions for ASp.net MVC.
#model FMSApps.Models.ViewModelFaculty
#using(Html.BeginForm())
{
<fieldset>
<legend class="main">Personal Particulars</legend>
<div class="view-table">
<div class="view-row">
<div class="view-name"><label for="staffId">Staff ID</label></div>
<div class="view-name"><input id ="txtStaffId" name="StaffId" class="k-textbox" data-bind="value: StaffId" type="text" required /></div>
<div class="view-name"><label for="facultyType">Faculty Type</label></div>
<div class="view-name">
#(Html.Kendo().DropDownList()
.Name("ddFacultyType")
.DataTextField("FacultyType")
.DataValueField("FacultyTypeId")
.OptionLabel("Select Faculty Type")
.Enable(true)
.AutoBind(true)
.DataSource(ds =>
{
ds.Read(read =>
{
read.Action("GetFacultyTypes", "NewFaculty");
})
.ServerFiltering(true);
})
)
</div>
</div>
I am showing a part of my view as if I could post two fields then rest all will be of same logic.
So now when I submit my form I need to post the data in the form to controller.
I know it can be dne in ASp.net mvc html helpers but not sure how to do with kendoui, even kendoUi website as also not given any ened to end exaple of how to use the extensions in a form and how to post the data.
If anyone has been working in same enviorment or any direction on how to do please suggest me.
Let's say if you use
<input id ="txtStaffId" name="StaffId" class="k-textbox" data-bind="value: StaffId" type="text" required /></div>
#(Html.Kendo().DropDownList()
.Name("ddFacultyType")
.DataTextField("FacultyType")
.DataValueField("FacultyTypeId")
.OptionLabel("Select Faculty Type")
.Enable(true)
.AutoBind(true)
.DataSource(ds =>
{
ds.Read(read =>
{
read.Action("GetFacultyTypes", "NewFaculty");
})
.ServerFiltering(true);
})
)`
When a button with attribute is pressed on the page, the field on the form will then be post to the controller. Which means in this case, a field name 'txtStaffId' paired with input value & 'ddFacultyType' with the paired value(whichever you select on the list) will be send to the controller.
Related
I'm implementing asp.net core MVC project. In my controller class called ApiApplicant, Create method, I have 3 selectlists that its items should be populated from a table called APIApplicantHistory. My models and create method and view are implemented like following:
using System.Collections.Generic;
namespace CSDDashboard.Models
{
public partial class Apiapplicant
{
public Apiapplicant()
{
ApiApplicantHistory = new HashSet<ApiApplicantHistory>();
}
public int Id { get; set; }
public string ApiRequestDate { get; set; }
public int? ApiRequestNo { get; set; }
public int? Apiid { get; set; }
public int? ApplicantId { get; set; }
public int? GateId { get; set; }
public string NocRequestDate { get; set; }
public string NocRequestNo { get; set; }
public string Url { get; set; }
public string Description { get; set; }
public bool? IsDeleted { get; set; }
public virtual Api Api { get; set; }
public virtual Applicant Applicant { get; set; }
public virtual Gate Gate { get; set; }
public virtual ICollection<ApiApplicantHistory> ApiApplicantHistory { get; set; }
}
}
using System;
using System.Collections.Generic;
namespace CSDDashboard.Models
{
public partial class ApiApplicantHistory
{
public int Id { get; set; }
public int? ApiApplicantId { get; set; }
public string Date { get; set; }
public int? SentResponseType { get; set; }
public int? UnconfirmedReason { get; set; }
public int LastReqStatus { get; set; }
public string Description { get; set; }
public virtual Apiapplicant ApiApplicant { get; set; }
public virtual EntityType LastReqStatusNavigation { get; set; }
public virtual EntityType SentResponseTypeNavigation { get; set; }
public virtual EntityType UnconfirmedReasonNavigation { get; set; }
}
}
using System;
using System.Collections.Generic;
namespace CSDDashboard.Models
{
public partial class EntityType
{
public EntityType()
{
ApiApplicantHistoryLastReqStatusNavigation = new HashSet<ApiApplicantHistory>();
ApiApplicantHistorySentResponseTypeNavigation = new HashSet<ApiApplicantHistory>();
ApiApplicantHistoryUnconfirmedReasonNavigation = new HashSet<ApiApplicantHistory>();
}
public int Id { get; set; }
public string Name { get; set; }
public string EntityKey { get; set; }
public virtual ICollection<ApiApplicantHistory> ApiApplicantHistoryLastReqStatusNavigation { get; set; }
public virtual ICollection<ApiApplicantHistory> ApiApplicantHistorySentResponseTypeNavigation { get; set; }
public virtual ICollection<ApiApplicantHistory> ApiApplicantHistoryUnconfirmedReasonNavigation { get; set; }
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace CSDDashboard.Models
{
public class APIApplicantViewModel
{
public Apiapplicant apiApplicantvm { get; set; }
public ApiApplicantHistory apiApplicantHistoryvm { get; set; }
}
}
public class ApiapplicantsController : Controller
{
private readonly CSSDDashboardContext _context;
public ApiapplicantsController(CSSDDashboardContext context)
{
_context = context;
}
public IActionResult Create()
{
ViewData["sentResponseType"] = new SelectList(_context.EntityType.Where(g => g.EntityKey == "sentResponseType").ToList(), "ID", "name");
ViewData["unconfirmedReason"] = new SelectList(_context.EntityType.Where(g => g.EntityKey == "unconfirmedReason").ToList(), "ID", "name");
ViewData["lastReqStatus"] = new SelectList(_context.EntityType.Where(g => g.EntityKey == "lastRequestStatus").ToList(), "ID", "name");
return View();
}
}
And a part of create view implementation:
#model CSDDashboard.Models.APIApplicantViewModel
#{
ViewData["Title"] = "create";
}
<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="apiApplicantvm.GateId" class="control-label"></label>
<select asp-for="apiApplicantvm.GateId" class="form-control" asp-items="ViewBag.GateId"></select>
</div>
<div class="form-group">
<label asp-for="apiApplicantHistoryvm.SentResponseType" class="control-label"></label>
<select asp-for="apiApplicantHistoryvm.SentResponseType" class="form-control" asp-items="ViewBag.sentResponseType"></select>
</div>
<div class="form-group">
<label asp-for="apiApplicantHistoryvm.UnconfirmedReason" class="control-label"></label>
<select asp-for="apiApplicantHistoryvm.UnconfirmedReason" class="form-control" asp-items="ViewBag.unconfirmedReason"></select>
</div>
<div class="form-group">
<label asp-for="apiApplicantHistoryvm.LastReqStatus" class="control-label"></label>
<select asp-for="apiApplicantHistoryvm.LastReqStatus" class="form-control" asp-items="ViewBag.lastReqStatus"></select>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Index">Back</a>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
In create method, all the viewData are filled with the correct related data but the problem is existing in Create view, after running the project an error like below is shown in Create page:
An unhandled exception occurred while processing the request.
NullReferenceException: Object reference not set to an instance of an object.
After debugging the code I understand that In create view, apiApplicantvm is not null but apiApplicantHistoryvm returns null and the above error is because of that. I appreciate if anyone could tells me how to fix the problem.
I hope you would be using EF core as ORM because you are using Asp.net core.
To load related data in EF core.
It can be done in 2 ways or Lazy loading
Eager loading
_context.EntityType.Where(g=>g.EntityKey=="sentResponseType")
.Include(x=>x.ApiApplicantHistoryLastReqStatusNavigation).ToList()
OR
Lazy loading
on your modal creating
protected override void
OnConfiguring(DbContextOptionsBuilder optionsBuilder) => optionsBuilder .UseLazyLoadingProxies() .UseSqlServer(myConnectionString);
OR
on startup.cs of your core MVC project
Lazy loading example.
.AddDbContext<BloggingContext>(
b => b.UseLazyLoadingProxies()
.UseSqlServer(myConnectionString));
for more info learn.microsoft.com/en-us/ef/core/querying/related-data
https://learn.microsoft.com/en-us/ef/core/querying/related-data
Thank you very much for the answers. I'm using EF core and I changed my code as what you suggested. I added ViewData["sentResponseType"] = new SelectList(_context.EntityType.Where(g => g.EntityKey == "sentResponseType")
.Include(x => x.ApiApplicantHistoryLastReqStatusNavigation).ToList(), "ID", "name");
in my create method.
And my problem is here in Create view, in the below line there exists a null value in apiApplicantHistoryvm:
Thank you for the help. The problem was here in my code
ViewData["sentResponseType"] = new SelectList(_context.EntityType.Where(g => g.EntityKey == "sentResponseType").ToList(), "ID", "name");
I should use Id instead of ID according to my EntityType model.
So basically once the user clicks on the module for create, I would want it to show the module shown instead of a drop down list for selection.
#model Module1.Models.Learn
#{
ViewBag.Title = "Create";
}
<h2>Create</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>Learn</legend>
<div class="editor-label">
#Html.LabelFor(model => model.ModuleId, "Module")
</div>
<div class="editor-field">
#Html.DropDownList("ModuleId", String.Empty)
#Html.ValidationMessageFor(model => model.ModuleId)
</div>
Above is my Create View for Learning Outcome.
#model Module1.Models.Module
#{
ViewBag.Title = "Details";
}
<h2>Learning Outcome : #Model.Code</h2>
<br /
This is the Details View for my Learning Outcome. I tried using the code "#Module.Code" to portray in my Create View but was unsuccessful. Is there another way for me to have the same result in the create view?
My Module Model
using System.Collections.Generic;
namespace Module1.Models
{
public class Module
{
public int ModuleId { get; set; }
public int CourseId { get; set; }
public int LecturerId { get; set; }
public string Code { get; set; }
public string Description { get; set; }
public virtual Course Course { get; set; }
public virtual Lecturer Lecturer { get; set; }
public List<Reference> References { get; set; }
public List<Assessment> Assessments { get; set; }//new
public List<Front> Fronts { get; set; }
public List<Learn> Learns { get; set; }
public List<Topic> Topics { get; set; }
}
}
My Learn Model
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Module1.Models
{
public class Learn
{
public int LearnId { get; set; }
public int ModuleId { get; set; }
public string LearnText { get; set; }
public bool A { get; set; }
public bool B { get; set; }
public bool C { get; set; }
public bool D { get; set; }
public bool E { get; set; }
public bool F { get; set; }
public bool G { get; set; }
public bool H { get; set; }
public bool I { get; set; }
public virtual Module Module { get; set; }
}
}
In your GET method for create you need to generate a SelectList that represents the options you want to render in the dropdown. Ideally you should be using a view model to represent what you want to display/edit, but in this example, I'll just assign in to ViewBag
var modules = // call database to get all the modules
ViewBag.ModuleList = new SelectList(modules, "ModuleId", "Code");
View
#model Module1.Models.Learn
....
#using (Html.BeginForm()) {
....
#Html.DropDownListFor(m => m.ModuleID, (SelectList)ViewBag.ModuleList, "-please select-")
....
}
or if your using a view model (which you should, refer What is ViewModel in MVC?) then it would be
#Html.DropDownListFor(m => m.ModuleID, Model.ModuleList, "-please select-")
Note the value of property Module.Code will be the display text, and the value of property Module.ModuleId will be bound to the Learn.ModuleID property. If you set the value of Learn.ModuleID in the controller before passing it to the view, then the text for that Module will be displayed, otherwise the "-please select-" option will be selected.
Note ALWAYS use strongly typed helpers - DropDownListFor() not DropDownList()
Edit
Based on further comments by OP, to display the value as 'readonly'. In the controller, get the Code value for the Module and assign to a view model or ViewBag property
var module = db.Modules.Where(m => m.ModuleId == learn.ModuleId).FirstOrDefault();
if (module != null)
{
ViewBag.Code = module.Code;
}
and in the view
<div>#ViewBag.Code</div>
or
#Html.DisplayFor(m => m.Code) // if using a view model
and if you want to post back the value as well, include a hidden input for the ModuleID
#Html.HiddenFor(m => m.ModuleId)
I am trying to pass the dropdownlist value to my controller so I can add the values to a list of paycodes but I keep getting a "Value cannot be null." error. My paycode list has many items in it. Not sure what is null or wrong here...
INNER EXCEPTION
Value cannot be null.
Parameter name: source
VIEW
<!-- products input-->
<div class="control-group col-lg-6">
<label class="control-label">Product</label>
<div class="controls">
#using (Ajax.BeginForm("AddPayCode", "Referral",
new AjaxOptions()
{
HttpMethod = "POST",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "PayCodes",
Url = Url.Action("AddPayCode", "Referral")
}))
{
#Html.ValidationSummary()
#Html.DropDownListFor(model => model.SelectedPayCode, new SelectList(Model.PayCodes.ToList(), "Id", "Description"), "- Select -")
<input type="submit" value="Add" />
}
</div>
</div>
CONTROLLER
[HttpPost]
public void AddPayCode(ReferralModel model)
{
var test = model.SelectedPayCode;
//TODO: Add to model.Referral.PayCodes list and return list of selected items
}
MODEL
public class ReferralModel
{
public Customer Customer { get; set; }
public Employee Employee { get; set; }
public List<PayCode> PayCodes { get; set; }
public int SelectedPayCode { get; set; }
public Referral Referral { get; set; }
}
DOMAIN OBJECT
public class Referral
{
[Key]
public int Id { get; set; }
public int CustomerId { get; set; }
public int EmployeeId { get; set; }
public decimal Total { get; set; }
public virtual List<PayCode> PayCodes { get; set; }
public virtual Customer Customer { get; set; }
public virtual Employee Employee { get; set; }
}
Objective :
User chooses a paycode from the dropdown and clicks "Add" Paycode is
added to the referral PayCodes list
Controller returns the list of paycodes selected to the view (not
yet implemented)
The issue was the controller is missing the property of the dropdown list.
[HttpPost]
public void AddPayCode(ReferralModel model, ** string SelectedPayCode ** <-- missing)
{
var test = SelectedPayCode;
//TODO: Add to model.Referral.PayCodes list and return list of selected items
}
I hope someone can help with this one. I have three Model classes like this:
public class Provider
{
public Guid ProviderId { get; set; }
public string Name { get; set; }
public Guid LocationId { get; set; }
public virtual Location Location { get; set; }
}
public class Location
{
public Guid LocationId { get; set; }
public string NameOrCode { get; set; }
public string Description { get; set; }
public string StreetNumber { get; set; }
public string StreetAddress1 { get; set; }
public string StreetAddress2 { get; set; }
public string City { get; set; }
public int? StateId { get; set; }
public string Zip { get; set; }
public string ContactPhone { get; set; }
public virtual State State { get; set; }
}
public class State
{
public int StateId { get; set; }
public string Name { get; set; }
public string Abbreviation { get; set; }
}
As you can see, a Provider has a Location (separate class for reuse elsewhere), and a Location has a State (which is null until selected).
My Controller looks like this for my Create methods:
public class ProviderController : BaseController
{
private SetupContext db = new SetupContext();
// other CRUD methods ...
//
// GET: /Provider/Create
public ActionResult Create()
{
Location location = new Location()
{
LocationId = Guid.NewGuid(),
NameOrCode = Resources.BillingLocation,
Description = Resources.BillingLocationDescription
};
Provider provider = new Provider()
{
ProviderId = Guid.NewGuid(),
LocationId = location.LocationId,
Location = location
};
ViewBag.StateId = new SelectList(db.States, "StateId", "Name", provider.Location.StateId);
return View(provider);
}
//
// POST: /Provider/Create
[HttpPost]
public ActionResult Create(Provider provider)
{
if (ModelState.IsValid)
{
db.Locations.Add(provider.Location);
db.Providers.Add(provider);
db.SaveChanges();
return RedirectToAction("Index");
}
ViewBag.StateId = new SelectList(db.States, "StateId", "Name", provider.Location.StateId);
return View(provider);
}
// other CRUD methods ...
}
Finally, my View looks like this:
<div class="editor-label">
#Html.LabelFor(model => model.Location.StateId, #Resources.Location_State_Display_Name)
</div>
<div class="editor-field">
#Html.DropDownList("StateId", #Resources.ChooseFromSelectPrompt)
#Html.ValidationMessageFor(model => model.Location.StateId)
</div>
My problem is that the state the user selects in the DropDownList never gets set on my Model on the Create POST. I have similar code in my Edit View and the state is populated correctly in that View (that is, the state associated with an existing Provider.Location shows selected in the DropDownList for the user to edit if desire), but in both the Create and the Edit Views the selection made by the user is never registered in my Model (specifically the Provider.Location.StateId) coming in from the POST.
Looking at the HTML produced I see this:
<div class="editor-label">
<label for="Location_StateId">State/Territory</label>
</div>
<div class="editor-field">
<select id="StateId" name="StateId"><option value="">[Choose]</option>
<option value="1">Alabama</option>
<option value="2">Alaska</option>
<!-- more options ... -->
</select>
<span class="field-validation-valid" data-valmsg-for="Location.StateId" data-valmsg-replace="true"></span>
</div>
I suspect I need to somehow convey the Location.StateId relationship instead of just StateId as I see above but I can't figure out the correct syntax to do that. I've tried changing my ViewBag dynamic property to Location_StateId like this:
ViewBag.Location_StateId = new SelectList(db.States, "StateId", "Name", provider.Location.StateId);
And the DropDownList in my View like this:
#Html.DropDownList("Location_StateId", #Resources.ChooseFromSelectPrompt)
I figured then perhaps that notation would work because the label beside my DropDownList was rendered as:
<div class="editor-label">
<label for="Location_StateId">State/Territory</label>
</div>
This attempt did not work. Can you help me out?
Thanks in advance.
#Html.DropDownList("Location.StateId", #Resources.ChooseFromSelectPrompt)
Also the following line doesn't do anything useful:
ViewBag.StateId = new SelectList(db.States, "StateId", "Name", provider.Location.StateId);
You are assigning a SelectList to something that is supposed to be a scalar property. You probably wanted to pass the collection as ViewBag:
ViewBag.States = new SelectList(db.States, "StateId", "Name", provider.Location.StateId);
and then in the view:
#Html.DropDownList("Location.StateId", (SelectList)ViewBag.States)
A brief description of what I am doing. I am creating a rather crude IS Asset tracking database using ASP MVC 3 and EF Code First approach. I can create a new asset. I can view the details on an asset. I can even display the edit view and edit the AssetTag. However the record will not update any of the other fields. If I edit the LocationName for instance. It will act like it is posting and return me to the Index view, but the record never actually posts the change.
I have created the Model below
public class AssetModel
{
public int id { get; set; }
public string AssetTag { get; set; }
public virtual Location Location { get; set; }
public virtual Hardware Hardware { get; set; }
public virtual Software Software { get; set; }
public virtual User User { get; set; }
}
public class Location
{
public int LocationId { get; set; }
public string LocationName { get; set; }
}
public class Hardware
{
public int HardwareId { get; set; }
public string Manufacturer { get; set; }
public string Make { get; set; }
public string Model { get; set; }
}
public class Software
{
public int SoftwareId { get; set; }
public string PublisherName { get; set; }
public string SoftwarePackageName { get; set; }
public string SoftwarePackageVersion { get; set; }
public string SerialNumber { get; set; }
public bool IsVolumeLicense { get; set; } // as in "Yes this is a Vol. Lic. Agreement"
public LicenseAgreement LicenseAgreement { get; set; }
}
public class LicenseAgreement
{
public int LicId { get; set; }
public string VolumeLicenseAgreementCompany { get; set; }
public string AgreementIdentifier { get; set; }
public DateTime VolumeLicenseStartDate { get; set; }
public DateTime VolumeLicenseExpirationDate { get; set; }
public Int16 NumberOfLicenses { get; set; }
}
public class User
{
// may remove this at some time and pull from Active Directory.
// for now we take the easy route.
public int UserId { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
}
I have this DbDataSet that uses the AssetModel above:
public class AssetContext : DbContext
{
public DbSet<AssetModel> Assets { get; set; }
}
In my AssetController I have this for Edit:
public ActionResult Edit(int id)
{
AssetModel assetmodel = db.Assets.Find(id);
return View(assetmodel);
}
//
// POST: /Asset/Edit/5
[HttpPost]
public ActionResult Edit(AssetModel assetmodel)
{
if (ModelState.IsValid)
{
db.Entry(assetmodel).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
return View(assetmodel);
}
And here is the Edit.cshtml
#model ISHelpDesk.Models.AssetModel
#{
ViewBag.Title = "Edit";
}
<h2>Edit</h2>
#using (Html.BeginForm("Edit", "Asset")) {
#Html.ValidationSummary(true)
<fieldset>
<legend>AssetModel</legend>
<div class="editor-label">
#Html.LabelFor(model => model.AssetTag)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.AssetTag)
#Html.ValidationMessageFor(model => model.AssetTag)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Location.LocationName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Location.LocationName)
#Html.ValidationMessageFor(model => model.Location.LocationName)
</div>
</fieldset>
<p><input type="submit" value="Save"</p>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
your AssetContext should be
public class AssetContext : DbContext
{
public DbSet<AssetModel> Assets { get; set; }
public DbSet<Location> Locations { get; set; }
public DbSet<Hardware> Hardwares { get; set; }
public DbSet<Software> Softwares { get; set; }
public DbSet<LicenseAgreement> LicenseAgreements { get; set; }
public DbSet<User> Users { get; set; }
}
this is registering each of your classes as a table in the DbContext, what you had before showed your DbContext consists only of AssetModel
Update: The issue may be that when you get to the post method of the edit, the Asset is no longer associated with the database Asset it was originally loaded from, have a go at changing it to
public ActionResult Edit(int id)
{
AssetModel assetmodel = db.Assets.Find(id);
return View(assetmodel);
}
[HttpPost]
public ActionResult Edit(int id, FormCollection collection)
{
AssetModel assetmodel = db.Assets.Find(id);
if (TryUpdateModel(assetmodel))
{
db.SaveChanges();
return RedirectToAction("Index");
}
return View(assetmodel);
}
Obviously this may not be the behaviour you want I'm just trying to see if you can get some changes persisted and go from there
Your Model classes should extend DbContext:
public class AssetModel :DbContext{}