Insert data into multiple tables using Ajax in ASP.NET MVC?

ajax asp.net asp.net-mvc asp.net-mvc-5 entity-framework-6

Question

I have two tables Employees and Contacts.

Employees:

  • Employee-ID
  • Name
  • Age
  • Military-status
  • Marital-status

Contacts:

  • ContactID
  • Phone
  • Email
  • EmpID //Has foreign-Key with Employee-ID

One employee has many contacts

I have form page to add a new employee with contact details using Ajax. In this code I have just added the new employee, but I want to also add the contact details into the Contacts tabls at the same time:

@using Compu_MVC.Models;
@model Tuple<Emp, Cont>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

    <fieldset>
        <legend></legend>

        <div class="editor-label">
            Employee Name
        </div>
        <div class="editor-field">
            @Html.EditorFor(Tuple => Tuple.Item1.Name)
            @Html.ValidationMessageFor(Tuple => Tuple.Item1.Name)
        </div>

        <div class="editor-label">
            Age
        </div>
        <div class="editor-field">
            @Html.EditorFor(Tuple => Tuple.Item1.Age)
            @Html.ValidationMessageFor(Tuple => Tuple.Item1.Age)
        </div>

        <div class="editor-label">
            DepartmentName
        </div>
        <div class="editor-field">
         @Html.DropDownListFor(c => c.Item1.DepID, ViewData["Department"] as SelectList)          
        </div>
        <div class="editor-label">
            MilitaryStatus
        </div>
        <div class="editor-field">
            @Html.EditorFor(Tuple => Tuple.Item1.MilitaryStatus)
            @Html.ValidationMessageFor(Tuple => Tuple.Item1.MilitaryStatus)
        </div>
        <div class="editor-label">
            MaritalStatus
        </div>
        <div class="editor-field">
            @Html.EditorFor(Tuple => Tuple.Item1.MaritalStatus)
            @Html.ValidationMessageFor(Tuple => Tuple.Item1.MaritalStatus)
        </div>
        <div class="editor-label">
            Job
        </div>
        <div class="editor-field">
            @Html.EditorFor(Tuple => Tuple.Item1.Job)
            @Html.ValidationMessageFor(Tuple => Tuple.Item1.Job)
        </div>
        <div class="editor-label">
            Gendar
        </div>
        <div class="editor-field">
            @Html.EditorFor(Tuple => Tuple.Item1.Gendar)
            @Html.ValidationMessageFor(Tuple => Tuple.Item1.Gendar)
        </div>
        <div class="editor-label">
            IDNumber
        </div>
        <div class="editor-field">
            @Html.EditorFor(Tuple => Tuple.Item1.IDNumber)
            @Html.ValidationMessageFor(Tuple => Tuple.Item1.IDNumber)
        </div>
        <div class="editor-label">
            Address
        </div>
        <div class="editor-field">
            @Html.EditorFor(Tuple => Tuple.Item2.Phone)
            @Html.ValidationMessageFor(Tuple => Tuple.Item2.Phone)
        </div>
        <div class="editor-label">
            Email
        </div>
        <div class="editor-field">
            @Html.EditorFor(Tuple => Tuple.Item2.Email)
            @Html.ValidationMessageFor(Tuple => Tuple.Item2.Email)
        </div>
        <div class="editor-label">
            Email
        </div>
        <div class="editor-field">
            @Html.EditorFor(Tuple => Tuple.Item2.Address)
            @Html.ValidationMessageFor(Tuple => Tuple.Item2.Address)
        </div>
        <p>           
            <input id="btnCreate" type="submit" name="Create" value="Create" />
        </p>
    </fieldset>
}
<div>
    @Html.ActionLink("Close", "Index")
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/jquery-ui-1.10.2/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/jquery-ui-1.10.2/ui/minified/jquery-ui.min.js")" type="text/javascript"></script>

<script type="text/javascript">
    
    $(function () {
        $("#btnCreate").click(function () {
            $.ajax({
                type: "POST",
                url: "/Home/AjaxMethod",
                data: '{Name: "' + $("#Name").val()
                + '"Age: "' + $("#Age").val()
                + '"MilitaryStatus:"'+ $("#MilitaryStatus").val()
                + '"MaritalStatus: "' + $("#MaritalStatus").val()
                + '"Job: "' + $("#Job").val()
                + '"Gendar: "' + $("#Gendar").val()
                + '"IDNumber: "' + $("#IDNumber").val()
                + '"MaritalStatus: "' + $("#MaritalStatus").val() +'" }',

                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    alert("Hello: " + response.Name + " .\nCurrent Date and Time: " + response.DateTime);
                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });
        });
    });


    //$('#c').click(function () {
    //    alert('ok')
    //    $.ajax({
    //        url: '/Employe/Create',
    //        dataType: "json",
    //        type: "POST",
    //        contentType: 'application/json; charset=utf-8',
    //        data: JSON.stringify({ Emp: { Name: 'Rintu', Age: '12343' } }),
    //        async: true,
    //        processData: false,
    //        cache: false,
    //        success: function (data) {
    //            alert(data);
    //        },
    //        error: function (xhr) {
    //            alert('error');
    //        }
    //    });
    //});  

    function SaveEmployee() {
        debugger;
        //var Name = $("#Name").val();
        //var Age = $("#Age").val();
        //var DepartmentID = $("#Department.DepartmentID").val();
        //var MilitaryStatus = $("#MilitaryStatus").val();
        //var MaritalStatus = $("#MaritalStatus").val();
        //var Job = $("#Job").val();
        //var Gendar = $("#Gendar").val();
        //var IDNumber = $("#IDNumber").val();


        //var Employee = {
        //    "Name": Name, "Age": Age,
        //    "DepartmentName.DepartmentID": DepartmentName.DepartmentID, "MilitaryStatus": MilitaryStatus, "MaritalStatus": MaritalStatus,
        //    "Job": Job, "Gendar": Gendar, "IDNumber": IDNumber
        //};

        //$.post("/Employe/Create", Employee,
        //    function (data) { if (data == 0) { location = location.href; } }, 'json');

       
            /*POST*/

               


    } 
</script>

This is my EmployeeController :

public class EmployeController : Controller
{
    DynamicEntities db = new DynamicEntities();

    // GET: Employe
    public ActionResult Index() //Record Select 
    {
        List<Employee> EmployeeDatas = db.Employees.OrderByDescending(x => x.EmployeeID).ToList<Employee>();
        return View(EmployeeDatas);           
    }

    [HttpGet]
    public PartialViewResult Create()   //Insert PartialView  
    {
        DynamicEntities db = new DynamicEntities();
        var contrs = db.Departments.ToList();
        ViewData["Department"] = new SelectList(contrs, "DepartmentID", "DepartmentName");
        return PartialView(new Emp());
    }

    [HttpPost]
    public ActionResult Create(Employee emp) // Record Insert  
    {
        DynamicEntities db = new DynamicEntities();
        db.Employees.Add(emp);
        db.SaveChanges();

        return Redirect("Index");
    }
}

I tried several ways but still not get the solution .

Thanks

1
0
5/8/2017 7:39:39 PM

Fastest Entity Framework Extensions

Bulk Insert
Bulk Delete
Bulk Update
Bulk Merge

Accepted Answer

Better approach is to create viewmodel of your both model like

public class EmployeesContactViewModel
{
    public string Name{ get; set; }
    public int Age{ get; set; } 
    public bool MilitaryStatus{ get; set; }
    public string Phone{ get; set; } 
    public string Email{ get; set; }
    // etc etc rest of your data         
}

and after that in AJAX request serialaze your data as per requirement. For Example

var EmployeesContact={  
   Name:$("#Name").val(),
   Age:$("#Age").val(),
   MilitaryStatus:$("#MilitaryStatus").val(),
   Phone:$("#Phone").val(),
   Email:$("#Email").val()
   // etc etc rest of your data 
};
$("#btnCreate").click(function() {
  $.ajax({
    type: "POST",
    url: "/Home/Add",
    data: EmployeesContact,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(response) {
      alert("Hello: " + response.Name + " .\nCurrent Date and Time: " + response.DateTime);
    },
    failure: function(response) {
      alert(response.responseText);
    },
    error: function(response) {
      alert(response.responseText);
    }
  });
});

Then in your controller, use your ViewModel to populate your entities, then insert using EF:

[HttpPost]
public ActionResult Add(EmployeesContactViewModel model)
{
     var objEmployee = new Employee{
          Name = model.Name,
          Age= model.Age,
          MilitaryStatus= model.MilitaryStatus,
     };

     var objContact= new Contact{
          Phone= model.Phone,
          Email= model.Email
     };

     //etc for your other entities

     using (var context = new DynamicEntities )
     {
          context.Employee.Add(objEmployee);
          objContact.EmployeeId = Employee.EmployeeId;
          context.Contact.Add(objContact);
          context.SaveChanges();    
     }

     //whatever you want to do here for the result, maybe direct to new controller
     //or return view
     return View();

}
3
5/8/2017 9:20:23 PM

Related Questions

How can I map tables using fluent API in ASP.NET MVC 5, Entity Framework 6?

I am trying to create a one to one relationship using C# in Entity Framework 6 using ASP.NET MVC 5 with built-in user authentication....I am able to make tables and connections with the defaults that Entity Framework creates. But when I try to use fluent API.... more specifically when I use on model creating even empty my database migration using t...
asp.net-identity asp.net-mvc-5 c# entity-framework entity-framework-6
asked by Bob

Insert Null values in SQL Server Table from ASP.NET-MVC app

I am working on ASP.NET-MVC5 app and I have tables in which I need to insert null values in some of the attribute but I am getting null value exception error. I have 5 bit fields in this table which need to update invidually ...error...Model class...public class StudentProfileStatus { public StudentProfileStatus() { } [Key] [Display(N...
asp.net-mvc-5 c# entity-framework-6 linq sql-server-2012
asked by Toxic

How to Update/Edit multiple records using Entity Framework in ASP.NET MVC

I need to update multiple records, this is how far I could get...First, I tried this...foreach (var Product in Products) { Product.Price = Price; db.Entry(Product).State = EntityState.Modified; db.SaveChanges(); } ...But, I'm getting this error...Store update, insert, or delete statement affected an unexpected number of rows (0). E...
asp.net-mvc c# entity-framework
asked by Ahmed

Filter/Search using Multiple Fields - ASP.NET MVC

I am using ...ASP.NET MVC... with ...EF 6.......I have a stock page which shows all the information on stock items. Now I want to filter records too....In picture below I have 3 options. I might filter by each option, one at a time or by combination of two or with all three. ...I was thinking of writing linq query for each and every options selecte...
.net asp.net-mvc c# entity-framework linq
asked by Avi-B

asp.net mvc , raw sql : Display data in Views generated using aggregate function

I am using ASP.NET MVC, EF 6 and SQL Server 2008. ...I want to generate a view which would show sum of all the sales in each day for a particular month in a particular year....I found LINQ query very complicated in such type of job, So I used a raw SQL query. I wrote query and tested in SQL server and it worked fine....select YEAR(Date) as Y...
asp.net-mvc entity-framework-6 sql sql-server
asked by Avi-B

Multiple login entities and Multiple level access permission in ASP.NET MVC-5

I'm building a system where have 4 level login, there is 4 Entities involved....System owner...Distributor...Agent...Subagent...System owner can create distributor login, distributor create agent login and agent create subagent login....I have created 4 projects, each has their own login identity. But the problem is I cannot create Distributor logi...
asp.net asp.net-mvc asp.net-mvc-5.2 c# entity-framework-6
asked by 黄天文

Populate DropDownList in ASP.NET MVC from database table using Entity Framework 6 and ViewModel

I have been scratching my head for a whole night on an issue I can do quickly using ajax/jquery and stored procedures. I want to ...1) Populate a drop down list from values obtained from a database table using Entity Framework and view model. I DO NOT WANT TO USE VIEWBAG OR VIEWDATA. Any help appreciated....2) How can I generate a Create View using...
asp.net-mvc dropdownlistfor entity-framework razor viewmodel
asked by TropicalViking

How to load jquery datatable using Ajax call, Loading table details from multiple tables (Master, Detail)

New and still a learner of the Web Technologies. Need directions here the right approach of how this be done. To explain the gist of what I'm looking for, this is a simple Model which maps to DB structure I'm using....Three Tables entities: ...Company..., ...Employee..., ...EmpDetail...Relationships: Company ...1__*... Employee , Employee ...1__1..
asp.net-mvc-5 datatables entity-framework-6 jquery
asked by AlphaTry

how i update multiple table using viewmodel in Asp.net mvc

Employee Model...public class Employee { [Key] public int EmployeeID { get; set; } public string Name { get; set; } public virtual Department Departments { get; set; } public int DepartmentID { get; set; } } ...Department Model...public class Department { public int DepartmentID { get; set...
asp.net-mvc asp.net-mvc-viewmodel c# entity-framework-6 viewmodel
asked by Çhöçklëtý Fázi

Json data is not populat in html table using jQuery ajax in asp.net mvc 5

I am creating a ee portal, where user is login, once he log in ..then he will come to report page.. In report page he have option to select date range to fetch details, I want to show date range search data in html table using jQuery and ajax, When i am trying it is not populate , I was try each one method but result is not coming ...My controller...
asp.net-ajax asp.net-mvc entity-framework-6 javascript jquery
asked by captainrock04

Fastest Entity Framework Extensions

Bulk Insert
Bulk Delete
Bulk Update
Bulk Merge
View more on Stack Overflow

Prime Library

Performance

Expression Evaluator

More Projects...

Related

Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow
Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow