CODEWITHSUNDEEP
jqueryasp.netentity-frameworkasp.net-mvc-4
Sukhjeevan
Sukhjeevan

Reputation: 3156

How to post data dynamically added by user in asp.net mvc 4 model dialog

I have to implement Create/Edit functionality using model dialog in ASP.NET MVC 4 with Entity Framework database first approach as per given below image:

enter image description here

I have gone through the following article on net while searching solution for this.

CLICK HERE TO BROWSE

It's very much similar what i want but the only difference is that in my case Emp name and Emp code is static but a user can add rows dynamically at client side in Field 1 , Field 2 , and Comments section so in this case how to save(create/Edit) data( dynamically added by user ) into database.

tblEmployee --> this table has EmpID, Emp name and Emp code column

tblTable1 --> this table has ID(primary key),EmpID(foreign key),Detail1

tblTable2 --> this table has ID(primary key),EmpID(foreign key),Detail2

Do I have to do use json/ajax approach or something else you suggest.

Thanks

Upvotes: 0

Views: 1807

Answers (2)

Jeyhun Rahimov
Jeyhun Rahimov

Reputation: 3787

If user can add Detail1, Detail2 and Comment by dynamically, define them as model, then add to action like following:

public class Detail1 {
   public string Content {get; set;}
}

public class Detail2 {
   public string Content {get; set;}
}

public class Comment {
   public string Content {get; set;}
}

[HttpPost]
public ActionResult Create(string EmpName, string EmpCode, List<Detail1> detail1s, List<Detail2> detail2s, List<Comment> comments)
{
    //save operations...
}

And view:

@using (Html.BeginForm())
{
// other static fields..

<input type="button" value="Add Detail1" onclick="AddDetail1();" />
<input type="button" value="Add Detail2" onclick="AddDetail2();" />
<input type="button" value="Add Comment" onclick="AddComment();" />

<table id="LeftDetails1">
        <tr>
            <td>
                Detail 1
            </td>
        </tr>
</table>

<table id="RightDetails2">
        <tr>
            <td>
               Detail 2
            </td>
        </tr>
</table>

<table id="BottomComments">
        <tr>
            <td>
               Comments
            </td>
        </tr>
</table>
}

<script type="text/javascript">
    function AddDetail1() {
        var rowDetail1 = $('#LeftDetails1 tr').length;
        var index = rowDetail1 + 1;
        $('#LeftDetails1').append("<tr><td><input type='hidden' name='detail1s.Index' value='" + index + "' /><input type='text' name='detail1s[" + index + "].Content' /></td></tr>");
    }

    function AddDetail2() {
        var rowDetail2 = $('#RightDetails2 tr').length;
        var index = rowDetail2 + 1;
        $('#RightDetails2').append("<tr><td><input type='hidden' name='detail2s.Index' value='" + index + "' /><input type='text' name='detail2s[" + index + "].Content' /></td></tr>");
    }

    function AddComment() {
        var rowComment = $('#BottomComments tr').length;
        var index = rowComment + 1;
        $('#BottomComments').append("<tr><td><input type='hidden' name='comments.Index' value='" + index + "' /><input type='text' name='comments[" + index + "].Content' /></td></tr>");
    }
</script>

And you can give value of EmpId to 3 models after employee save. Firstly save employee, then you will get it's Id, then give taht value to Detail1, Detail2 and Comment models and save again.

Hope, this will work.

Upvotes: 0

mambrow
mambrow

Reputation: 475

In you controller's parameters set your dynamic properties as arrays.

When you add a new row on the client side, name your control the same as what the parameter name would be. ie:

<input type="text" name="Detail1[0]" />
<input type="text" name="Detail1[1]" />
<input type="text" name="Detail1[2]" />

When you post to this controller, you should see all of the dynamic data has filled your arrays. You can handle the keys when it gets there.

Upvotes: 1

Related Questions