posting ASP.net MVC form having Kendoui widgets for ASP.net MVC

Question

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.

Answer 1

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.