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("");
}
});
});
});