H OME

CONTA CT

A B OUT

Search here....

ROAD MAP

CATEGORIES

BEST PRACTICES

DESIGN PATTERNS

Home ASP.NET MVC C# CSS jQuery Handling Multiple Entries and One Time Post in ASP.NET MVC

ABOUT ME
Winifred Cadap

Handling Multiple Entries and One Time

Post in ASP.NET MVC
IN ASP.NET MVC, C#, CSS, JQUERY - ON WEDNESDAY, JULY 02, 2014 - NO COMMENTS

Introduction

Follow

View my complete profile

CATEGORIES
AngularJS (6)
ASP.NET (1)

One type of Data Entry patterns in Web Application is multiple data entry. Examples

ASP.NET MVC (10)

of these multiple data entry are orders entry, guests registration, etc. In this

Best Practices (7)

example we will be using Client Registration. Below is a screenshot on what we will

BootStrap (4)

be working.

C# (18)
CSS (6)
Design Patterns (10)

Let your visitors save your web pages as PDF and set many options for the layout! Use a download as PDF link to PDFmyURL!

Design Patterns (10)

DI (1)
DIP (1)
HTML 5 (3)
jQuery (3)
LESS (1)
LINQ (1)
MongoDB (1)
Moq (1)
OOP (1)
Security (1)
SignalR (1)

Download:

UX (2)
Visual Studio (1)

Download the Source Code

POPULAR POSTS

What does it do?

1. Allow users to enter unlimited clients by clicking the New Client button and
enters the information of the client.
2. The User can delete the entry without server round trips (it's happening on the
client side).
3. Save all the entries at once.
Technologies used

ASP.NET MVC 4
jQuery
CSS
Let your visitors save your web pages as PDF and set many options for the layout! Use a download as PDF link to PDFmyURL!

Creating CRUD Application with

ASP.NET MVC 5, AngularJS,
BootStrap 3, and HTML5 - Part 1
T he reason why many developers
want to use AngularJS and...
Creating CRUD Application with
ASP.NET MVC 5, AngularJS,
BootStrap 3, and HTML5 - Part 5
Part 5 The Add, Update, and
Delete modules We...
Creating CRUD Application with
ASP.NET MVC 5, AngularJS,
BootStrap 3, and HTML5 Part 2
Part 2 Preparing the views of the
Contact Page using...

HTML 5

Creating CRUD Application with

ASP.NET MVC 5, AngularJS,
BootStrap 3, and HTML5 - Part 3
Part 3 : Creating the Back End
Using ASP.NET MVC The are...

How do we do this?
One approach is to loop through the web form and capture the values in the form.
We can do this in the controller. That's it!
The Code:

Creating CRUD Application with

ASP.NET MVC 5, AngularJS,
BootStrap 3, and HTML5 - Part 4
Part 4 : Communicating with
ASP.NET MVC In order for...

Let's create the client model first.

1
2
3
4
5
6
7
8
9

namespace MultipleEntry.Models
{
public class Client
{
public int Id { get; set; }
public string ClientName { get; set; }
public string Email { get; set; }
}
}

Multiple_Entry_clientModel.cs hosted with by GitHub

Paging, Sorting, and Searching in

ASP.NET MVC using PagedList
and Dynamic Linq
P agedList.mvc is a lightweight API
for server side paging...
view raw

The View:
We are going to use plain HMTL and jQuery to do the data capturing. We use jQuery
to manipulate the DOM.

1
2
3

Implementing Breadcrumb In
AngularJS Using Angular-UIRouter
O ne of the thing that is missing in
AngularJS API is the...

@model MultipleEntry.Models.Client
@{

Let your visitors save your web pages as PDF and set many options for the layout! Use a download as PDF link to PDFmyURL!

CRUD Application Using ASP.NET

MVC 5 and MongoDB
W hy use MongoDB? Its not a fad.
Its a need. I will not...

Creating Live Scoring using

SignalR, BootStrap CSS, HMTL5
and jQuery
ASP.NET SignalR is a library for
ASP.NET developers that...
Responsive CSS Flip Animations
One way to add user experience to
your website is by adding...

4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

ViewBag.Title = "Index";
}
<h2>Client Registration</h2>
@using (Html.BeginForm()) {
@Html.ValidationSummary(true)
<fieldset>
<legend>Client Registration</legend>
<table id="clientTable" class="table table-bordered">
<thead>
<tr>
<td>Client Name</td>
<td>Email</td>
<td></td>
</tr>
</thead>

BLOG ARCHIVE
2015 (7)
2014 (23)
October (3)
September (1)
August (1)
July (13)
Adapter Design Pattern
Unit of Work Design Pattern

Unit of Work Design Pattern

<tr id="tablerow0">
<td>
Prototype Design Pattern
<div class="editor-field">
<input class="text-box single-line" name="ClientName[0]" type="text" value="" required="required"
/> Pattern
Singleton Design
</div>
</td>
Builder Design Pattern
<td>
Abstract Factory Design Pattern
<div class="editor-field">
<input type="email" class="text-box single-line" name="Email[0]" value="" required="required" />
Strategy Design Pattern
</div>
</td>
Benefits of Removing Unused Using
<td>
Directives
<button type="button" class="btn btn-primary" onclick="removeTr(0);">Delete</button>
</td>
Factory Design Pattern
</tr>
</table>
<p>
<button id="addButton" type="submit" class="btn btn-primary" >New Client</button>
</p>
<hr />
<p>
<button type="submit" class="btn btn-primary" >Save Clients</button>
</p>
</fieldset>

Using LESS CSS To Implement DRY

Principle
Preventing BootStrap Alert From Being
Remove on th...
Handling Multiple Entries and One Time
Post in ASP...
Creating Live Scoring using SignalR,
BootStrap CSS...

Let your visitors save your web pages as PDF and set many options for the layout! Use a download as PDF link to PDFmyURL!

50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

June (4)
May (1)

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
var counter = 1;
$(function () {

$('#addButton').click(function () {
$('<tr id="tablerow' + counter + '"><td>' +
'<input class="text-box single-line" name="ClientName[' + counter + ']" type="text" value="" required="required" />' +
'</td>' +
'<td>' +
'<input type="email" class="text-box single-line" name="Email[' + counter + ']" value="" required="required" />' +
'</td>' +
'<td>' +
'<button type="button" class="btn btn-primary" onclick="removeTr(' + counter + ');">Delete</button>' +
'</td>' +
'</tr>').appendTo('#clientTable');
counter++;
return false;
});
});
function removeTr(index) {
if (counter > 1) {
$('#tablerow' + index).remove();
counter--;
}
return false;
}
</script>
}

Multiple_Entry_View_Model.cshtml hosted with by GitHub

view raw

The Controller:
In the controller, we loop through the form and capture the data. Save it to a list
Let your visitors save your web pages as PDF and set many options for the layout! Use a download as PDF link to PDFmyURL!

and we can save it to SQL Server data store or process further.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

[HttpPost]
public ActionResult Index(string any = "")
{
IList<Client> _Client = new List<Client>();
//Loop through the forms
for (int i = 0; i <= Request.Form.Count; i++)
{
var ClientName = Request.Form["ClientName[" + i + "]"];
var EMail = Request.Form["Email[" + i + "]"];
if ((ClientName != null) && (EMail != null))
{
_Client.Add(new Client { ClientName = ClientName, Email = EMail });
}
}
//Once you got the records then you can do anything
return View();
}

Multiple_Entry_Contoller.cs hosted with by GitHub

view raw

How to Verify:
One way to verify that the data has been captured is by placing a breakpoint and
run the application in a debug mode.

Let your visitors save your web pages as PDF and set many options for the layout! Use a download as PDF link to PDFmyURL!

Hope this article helps. Share it with your friends!

Like

Share

RELATED POSTS :

Paging, Sorting, and

Searching in A...

Handling Multiple
Entries and One T...

Using LESS CSS To

Implement DRY Pri...

Preventing BootStrap
Alert From Bei...

LABELS: ASP.NET MVC, C#, CSS, JQUERY

Let your visitors save your web pages as PDF and set many options for the layout! Use a download as PDF link to PDFmyURL!

Post a Comment

Newer Post

Home

Older Post

CodexSquare. Powered by Blogger .

COPYRIGHT 2013 CODEX SQUARE - ALL RIGHTS RESERVED - POWERED BY BLOGGER.COM

Let your visitors save your web pages as PDF and set many options for the layout! Use a download as PDF link to PDFmyURL!

Let your visitors save your web pages as PDF and set many options for the layout! Use a download as PDF link to PDFmyURL!