You must Sign In to post a response.
  • Category: ASP.Net MVC

    How to Read JSON Result in cshtml (view)

    i have a scenario where i upload an excel file and then read he file and then should display the file data in Table. I have to use in such a way that the controller passes JSON RESULT .

    This is what i have, not sure how to implement this. Could you please help me with this issue, i am new to MVC . Thank you

    Controller
    public ActionResult Upload(FormCollection formCollection)
    {
    var sitesList = new List<Site>();

    if (Request != null)
    {
    HttpPostedFileBase file = Request.Files["UploadedFile"];
    if ((file != null) && (file.ContentLength > 0) && !string.IsNullOrEmpty(file.FileName))
    {
    string fileName = file.FileName;
    string fileContentType = file.ContentType;
    byte[] fileBytes = new byte[file.ContentLength];
    var data = file.InputStream.Read(fileBytes, 0, Convert.ToInt32(file.ContentLength));

    //DataTable dt = GetDataTableFromSpreadsheet(file.InputStream, false);
    using (var package = new ExcelPackage(file.InputStream))
    {
    var currentSheet = package.Workbook.Worksheets;
    var workSheet = currentSheet.First();
    var noOfCol = workSheet.Dimension.End.Column;
    var noOfRow = workSheet.Dimension.End.Row;

    for (int rowIterator = 2; rowIterator <= noOfRow; rowIterator++)
    {
    var site = new Site();
    site.SiteName = (workSheet.Cells[rowIterator, 1].Value == null ? string.Empty : workSheet.Cells[rowIterator, 1].Value.ToString());
    sitesList.Add(site);


    }
    }

    }
    else
    {
    return View("Upload");
    }

    }

    sites = sitesList;
    return Json(sites, JsonRequestBehavior.AllowGet);

    }


    this is what i have in view:
    @using PartnerPortal.Models
    @using Newtonsoft.Json
    @using System.Web.Mvc
    @using System.Web.Helpers
    @model System.Web.Mvc.JsonResult



    <html>
    <head>
    <title> Upload</title>
    <meta name="viewport" content="width=device-width" />
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/json2.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/MyScript.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-1.8.2.intellisense.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-1.8.2.js")" type="text/javascript"></script>

    </head>
    <body>



    @using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {

    <table>
    <tr>
    <td>File:</td>
    <td>
    <input type="file" name="UploadedFile" />
    </td>
    </tr>
    <tr>
    <td colspan="2">
    <input type="submit" id="Submit" name="Submit" value="Submit" />
    </td>
    </tr>
    </table>
    }

    @if (Model == null)
    {
    }
    else
    {
    <script type="text/jscript">

    </script>

    <table class="table table-striped">
    <thead>
    <tr>
    <th>SiteName</th>

    </tr>
    </thead>
    @*<tbody id="SitesTable">
    @foreach (Site s in sites)
    {
    <tr>
    <td>@s.SiteName</td>

    </tr>
    }

    </tbody>*@
    </table>

    }
    </body>

    </html>
  • #763286
    hi,

    either u need to use Jquery JSON calling or else you can also use AngularJs calling.

    Sample code of (AngularJS calling )

    sample.js coding

    angular.module('PDC', ['ui.bootstrap'])// extending angular module from first part
    .controller('masterIFSCController', function ($scope, FileUploadService, $http) {

    function loadIFSCtempdata() {

    $http.get('/MasterIFSC/BindIFSCMasterdata')
    .success(function (result) {
    debugger
    if (result != 'No data fount') {
    $scope.IFSCMaster = result;
    $scope.totalItems = result.length;
    }
    else {
    $scope.IFSCMaster = null;
    }
    })
    .error(function (date) {
    console.log(data);
    })
    }

    })
    ---------------------

    in cshtml file code

    <table class="table table-striped table-bordered table-hover ">
    <tr class="info">
    <th>IFSC Code</th>
    <th>Bank Name</th>
    <th style="width:50px;">Actions</th>
    </tr>
    <tr ng-repeat="items in IFSCMaster | filter : paginate ">
    <td style="color:#f3461f;"><b>{{items.IFSCCode}}</b></td>
    <td>{{items.BankName}}</td>
    <td><button ng-click="deleteNewitem(items)" class="btn btn-info btn-xs">Delete</button></td>
    </tr>
    </table>


    using AnularJS you can easily read Json data

    Read JSON data using jquery ajax calling

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    <title></title>


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>


    <script type="text/javascript">
    $(function() {
    $("#btnShow").click(function() {
    $.ajax(
    {
    type: "POST",
    url: "JSONService.asmx/GetNamesByID",
    data: "{'word':'" + $("#txtID").val() + "'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
    alert(msg.d);
    $("#txtName").val(msg.d);
    },
    error: function() {
    alert('error');
    }
    });
    });
    });


    </script>


    </head>
    <body>
    <form id="form1" runat="server">
    <input id="txtID" type="text" /><br />
    <input id="txtName" type="text" /><br />
    <input id="btnShow" type="button" value="Show" />
    </form>
    </body>

    Thanks & Regards
    Ashok kallagunta


Sign In to post your comments