In this demo,
1. We will upload a CSV file, and after uploading the record display on the page.
2. Using search, we will search in the uploaded record.
Note: - In the demo, using the in-memory object to store & retrieve the record. You can use a database.
Let's Start
Step 1: - Open Visual Studio 2015
=> Go to File Menu => New => Project... Step 2: - In the Installed Templates
list, select Visual C# => Web Step 3: - Select ASP.Net Web Application (.NET Framework) from
the Web list => Type MVCApplication in
the Name box => Click OK Step 4: - Select MVC template from ASP.NET
Templates List => Click OK Step 5: - Right Click on Models folder in Solution Explorer => Add => Click New Items... => Expand Visual C# from left pane =>
Select Code =>Select Class from middle pane =>
Type UploadViewModels.cs in
the Name box => Click Add Copy Past following code in UploadViewModels.cs public class UploadViewModels{ [Required] [DisplayName("Browse
File")] public HttpPostedFileBase BrowseFile { get; set; } public string Search { get; set; }} Step 6: - Right Click on Models folder in Solution Explorer => Add => Click New Items... => Expand Visual C# from left pane =>
Select Code =>Select Class from middle pane =>
Type StudentModels.cs in
the Name box => Click Add Copy Past following code in StudentModels.cs public class StudentModels{ public string Name { get; set; } public string Age { get; set; } public string DOB { get; set; }} Step 7: - Right Click on Controllers folder
=> Add => Controller... => Select MVC 5 Controller - Empty => Click Add => Type UploadController in Controller Name box
=> Click Add Copy Past following code in UploadController.cs using MVCApplication.Models;using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Web.Mvc; namespace MVCApplication.Controllers{ public class UploadController : Controller { static List<StudentModels> listStudent = new List<StudentModels>(); public ActionResult Index() { return View(); } [HttpPost] public ActionResult Index(UploadViewModels model) { try { if (ModelState.IsValid) { byte[] buffer = new byte[model.BrowseFile.InputStream.Length]; model.BrowseFile.InputStream.Seek(0,
SeekOrigin.Begin); model.BrowseFile.InputStream.Read(buffer,
0, Convert.ToInt32(model.BrowseFile.InputStream.Length)); Stream stream = new MemoryStream(buffer); using (TextReader textReader = new StreamReader(stream)) { string line; while ((line = textReader.ReadLine()) != null) { //Here you can write
the database insert code string[] result =
line.Split(','); listStudent.Add(new StudentModels() { Name = result[0], Age = result[1], DOB = result[2] }); } ModelState.AddModelError("Meesage", "File uploaded
successfully."); } } } catch (Exception ex) { ModelState.AddModelError("Meesage", ex); } return View(); } [ChildActionOnly] public ActionResult ViewUploadedData() { //Here you can write
the database select code return PartialView("_ViewUploadedData", listStudent); } [HttpPost] public ActionResult Search(string name) { //Here you can write
the database select code if (!string.IsNullOrEmpty(name)) { return PartialView("_ViewUploadedData", listStudent.Where(m
=> m.Name == name).ToList()); } return PartialView("_ViewUploadedData", listStudent); } }} Step 8: - Build Project Step 9: - To Add View for Action Method, Right Click inside the Index Action body =>
Click Add View… => Type Index in the View name box =>
Click Add
Copy Past following code in Index.cshtml
@model MVCApplication.Models.UploadViewModels
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
@using (Html.BeginForm("Index", "Upload", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<table>
<tr>
<td>
@Html.LabelFor(model
=> model.BrowseFile, htmlAttributes: new { @class = "control-label col-md-2" })
</td>
<td>
<input name="BrowseFile" type="file" class="form-control" />
@Html.ValidationMessageFor(model
=> model.BrowseFile, "", new { @class = "text-danger" })
</td>
<td>
<input type="submit" value="Upload" class="btn
btn-default" />
</td>
</tr>
<tr>
<td>
@Html.LabelFor(model
=> model.Search, htmlAttributes: new { @class = "control-label col-md-2" })
</td>
<td>
@Html.EditorFor(model
=> model.Search, new { htmlAttributes = new { @class = "form-control" } })
</td>
<td>
<input type="button" value="Search" id="btnSearch" class="btn
btn-default" />
</td>
</tr>
<tr>
<td colspan="3">
@Html.ValidationMessage("Meesage", "", new { @class = "text-danger" })
</td>
</tr>
</table>
}
<hr />
<div id="dvViewUploadData">
@{
Html.RenderAction("ViewUploadedData");
}
</div>
@section Scripts
{
<script>
$(document).on("click", "#btnSearch", function () {
$.post("/Upload/Search", { "name": $("#Search").val() }, function (data, textStatus,
jqXHR) {
$("#dvViewUploadData").empty();
$("#dvViewUploadData").html(data);
});
})
</script>
}
Step 10: - Expand View folder => Right Click
on Upload folder => Add
=> View… => Type _ViewUploadedData in the View name box => Checked Create as a partial view checkbox
=> Click Add
Copy Past following code in _ViewUploadedData.cshtml
@model IEnumerable<MVCApplication.Models.StudentModels>
<h3>Using Table</h3>
<table border="1">
<tr>
<th>
@Html.DisplayNameFor(model
=> model.Name)
</th>
<th>
@Html.DisplayNameFor(model
=> model.Age)
</th>
<th>
@Html.DisplayNameFor(model => model.DOB)
</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem
=> item.Name)
</td>
<td>
@Html.DisplayFor(modelItem
=> item.Age)
</td>
<td>
@Html.DisplayFor(modelItem
=> item.DOB)
</td>
</tr>
}
</table>
<h3>Using WebGrid</h3>
@{
var webGrid = new WebGrid(Model, canPage: false);
}
@webGrid.GetHtml();
ALL Done
RUN Project
Note:- CSS & script rendering from the main application. Use jquery CDN URL to test script.
Output
Copy sample data in a text file and save as .csv
Ram,25,01-Jun-1988,
Shyam,20,01-Jul-1988,
Ghanshyam,30,01-Aug-1988,
Gopal,28,01-Sep-1988,