mvc ajax request using jquery and knockouts

Question

I was struck in when i am trying to submit a dropdown value to  controller using with ajax request and knockouts.

 i am attaching my code please give me a solution where i was mistaken... 

 

**model class:**

namespace knockout_practise.Models

{

public class EmployeeModel

{

public int EmpId { get; set; }

public int DeptId { get; set; }

public string EmpName { get; set; }

public string Designation { set; get; }

}

public class Depttbl

{

public int deptid { get; set; }

public string deptname { get; set; }

}

}

**controller class:**

public JsonResult Get()

{

EmployeeModel employee = new EmployeeModel

{

EmpId=24,

EmpName="John Doe",

Designation="SE",

};

return Json(employee, JsonRequestBehavior.AllowGet);

}

[HttpPost]

public ActionResult Post(EmployeeModel employees)

{

EmployeeModel ob = new EmployeeModel();

ob.EmpId = employees.EmpId;

ob.EmpName = employees.EmpName;

ob.Designation = employees.Designation;

ob.DeptId = employees.DeptId;

manageDBController cs = new manageDBController();

int n=cs.SaveEmpDetails(ob);

return View();

}

public JsonResult GetDepartmentDetails()

{

manageDBController cs = new manageDBController();

List<Depttbl> List = new List<Depttbl>();

List = cs.DeptDetailsGet();

return Json(List, JsonRequestBehavior.AllowGet);

}

}

**and i use another controller class**

public class manageDBController : Controller

{

//

// GET: /manageDB/

public ActionResult Index()

{

return View();

}

public int SaveEmpDetails(EmployeeModel ob)

{

int n = 0;

string cs = WebConfigurationManager.ConnectionStrings["connstr"].ConnectionString.ToString();

SqlConnection cn = new SqlConnection(cs);

SqlCommand cmd = new SqlCommand();

cmd.CommandText = "[dbo].[sp_insert]";

cmd.Connection = cn;

cmd.CommandType = CommandType.StoredProcedure;

cmd.Parameters.AddWithValue("@empid", ob.EmpId);

cmd.Parameters.AddWithValue("@empname", ob.EmpName);

cmd.Parameters.AddWithValue("@designation", ob.Designation);

cmd.Parameters.AddWithValue("@deptid", ob.DeptId);

try

{

cn.Open();

n = cmd.ExecuteNonQuery();

n = n > 0 ? n : 0;

}

finally

{

cn.Close();

}

return n;

}

public List<Depttbl> DeptDetailsGet()

{

List<Depttbl> obs = new List<Depttbl>();

Depttbl ob = new Depttbl();

string cs = WebConfigurationManager.ConnectionStrings["connstr"].ConnectionString.ToString();

SqlConnection cn = new SqlConnection(cs);

SqlCommand cmd = new SqlCommand();

cmd.CommandText = "[dbo].[DeptDetails_Get]";

cmd.Connection = cn;

cmd.CommandType = CommandType.StoredProcedure;

cn.Open();

using (SqlDataReader reader = cmd.ExecuteReader())

{

while (reader.Read())

{

Depttbl ob1 = new Depttbl();

ob1.deptid = Convert.ToInt32(reader["deptid"]);

ob1.deptname = reader["deptname"].ToString();

obs.Add(ob1);

}

}

cn.Close();

cmd.Connection.Close();

return obs;

}

}

**.cshtml :**

<h2> knockout</h2>

<script src="../../Scripts/knockout-3.0.0.debug.js" type="text/javascript"></script>

<script src="../../Scripts/knockout-3.0.0.js" type="text/javascript"></script>

<script src="../../Scripts/knockout.mapping-latest.debug.js" type="text/javascript"></script>

<script src="../../Scripts/knockout.mapping-latest.js" type="text/javascript"></script>

<p>Employee Id: <input data-bind="value:EmpId" type="text" id="txtempid"/></p>

<p>Employee Name: <input data-bind="value:EmpName" type="text" id="txtempname"/></p>

<p>Designation: <input data-bind="value:Designation" type="text" id="txtdesignation"/></p>

Department: <select id="CategoryType" style="width: 250px; height: 25px; margin-top: 10px;" data-bind="optionsText:'deptname',value:deptid">

</select>

<input type="button" id="btnSave" value="Submit" />

<p> @Html.Label("lblResult")</p>

<script src="../../Scripts/knockoutSample.js" type="text/javascript"></script>

**and finally script file is:**

$(document).ready(function () {

$.ajax({

url: '/Home/GetDepartmentDetails/',

cache: false,

contentType: 'application/json',

success: function (CategoryType) {

$('#CategoryType').empty();

$('#CategoryType').append("<option value=0>--Select--</option>");

for (var i = 0; i < CategoryType.length; i++) {

$('#CategoryType').append("<option value='" + CategoryType[i].deptid + "'>" + CategoryType[i].deptname + "</option>");

$('#CategoryType').val(ViewModel.DeptId());

}

$.ajax({

url: '/Home/Get',

type: 'post',

contentType: 'application/json',

success: function (result) {

var myobject = result;

viewmodel = ko.mapping.fromJS(myobject);

ko.applyBindings(viewmodel);

}

});

}

});

$('#btnSave').live("click", function (e) {

$.ajax({

url: '/Home/Post/',

async: true,

cache: false,

type: 'post',

data: ko.toJSON(viewmodel),

contentType: 'application/json',

success: function (result) {

$("lblResult").val("Recorded inserted Sucessfully");

$("txtempid").text("");

$("txtdeptid").text("");

$("txtempname").text("");

$("txtdesignation").text("");

}

});

});

});