ASP.NET MVC Fancygrid part2

by

Hi,

again with 2 tutorial ASP.NET MVC FancyGird.

After we create our data in Part 1,

Now will create new Controller Call it

StudentController.

The most important one is, what I highlight it (Yellow).

First one is declared our Interface,

  private readonly IStudent repositoryStudent;

building contractor.

 public StudentController(IStudent repoStudent)
        {
            repositoryStudent = repoStudent;
        }

 

This one our main job :)

 public JsonResult StudentJSON() {
            //    Student model = new Student();
           List<Student> model = new List <Student>();
            model = repositoryStudent.GetStudent;
            return Json(model, JsonRequestBehavior.AllowGet);
        }
 

From StudentJSON method will send Data to Our FancyGrid using AJAX.

Next step, Add View Just right click on DataTablesJQuery() and add Empty View.

So, if you visit FancyGrid website and check how to use it from the documentation page.

Previews Photo Show you what you need to add, its just 2 lines.

//FancyGrid
<link href="http://code.fancygrid.com/fancy.min.css" rel="stylesheet">
<script src="http://code.fancygrid.com/fancy.min.js"></script>

Past them in your page.

same next photo

Full View Page Code:


<link href="http://code.fancygrid.com/fancy.min.css" rel="stylesheet">
<style>
    .image-staff img {
        margin-top: -15px;
        border-radius: 2px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
</style>
<h2>DataTables JQuery</h2>

 <div id="container"></div>

 @section Scripts{
<script src="http://code.fancygrid.com/fancy.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {       
        $.ajax({
            type:"GET",
            url: "StudentJSON",
            dataType: "json",
            success: function (result) {                              
                new FancyGrid({
                    title: 'Student',
                    renderTo: 'container',
                    width: 750,
                    height: 450,
                    data: result,
                    defaults: {
                        editable: true,
                        resizable: true,
                        sortable: true,
                        filter: {
                            header: true,
                            emptyText: 'Search'
                        }
                    },
                    paging: true,

                    columns: [{
                        index: 'ID',
                        title: 'ID',
                        type: 'string'
                    }, {
                            type: 'string',
                            index: 'FirstName',
                            title: 'FirstName'
                        }
                        , {
                        type: 'string',
                        index: 'LastName',
                        title: 'LastName'
                    }, {
                            type: 'string',
                            index: 'City',
                            title: 'City'}, {
                            type: 'image',
                            index: 'image',
                            title: 'Photo',
                            cls: 'image-staff',
                            width: 100,
                            flex: 1 }]
                });
            },
            error: function () {
                alert("Error loading data! Please try again.");
            }
        });
    });
</script>
    }

 

OK, don't be scare, you will say it's not too many lines.

After you see the result.

So, let's talk about the HTML code first,

We added the javascript file and style file.

After that we create new

<div id="container"></div>

AJAX code responsible to execute StudentJSON() method and get the result to send it to FancyGrid.

 new FancyGrid({
    renderTo: 'container',
    width: 500,
    height: 400,
    data: result,
    columns: [{}]

}

Just you need on more thing,

Columns,you need yo write column Name ,Index and which data type.

in our example was number,image and string.

last column was image datatype becouse we sent image.

columns: [{
                        index: 'ID',
                        title: 'ID',
                        type: 'string'
                    }, {
                            type: 'string',
                            index: 'FirstName',
                            title: 'FirstName'
                        }
                        , {
                        type: 'string',
                        index: 'LastName',
                        title: 'LastName'
                    }, {
                            type: 'string',
                            index: 'City',
                            title: 'City'}, 
                                  
                           {type: 'image',
                            index: 'image',
                            title: 'Photo',
                            cls: 'image-staff',
                            width: 100}]

 

The result after running your project,

 

there are too many features in this tool, I just highlight in yellow paging, filtering, sorting and add image ;) 

if you back to the code you can see paging: true, this 2 words to enable paging.

to enable sorting, filtering, resizable and editable to all columns just add this piece of code.

defaults: {
                        editable: true,
                        resizable: true,
                        sortable: true,
                        filter: {
                            header: true,
                            emptyText: 'Search'
                        }
                    },

 

For more information and more and more features, you can visit https://www.fancygrid.com website 

or if you like to watch it on Youtube, How to use FancyGrid with ASP.NET MVC and SQL Server

just visit my Channel

ASP.NET MVC Fancygrid part1

by

Hi,

In this article will write about Grid, there are too many Grid tools you can find.

but what exactly we want from Grid to display, features and how to code it or work with it from coding side.

Sure everybody tries to find the useful tool and easy with coding.

So, I found one easy to work with from coding side and too many features, help your page to be good and easy.

FancyGrid, I found it on Twitter.

 

When I checked the website, I was shocked.

Why ? I will not tell you that 

let's try together to dig up in it, with ASp.NET MVC Application.

First Step, Create new ASP.NET MVC Application.

Follow the Photos.

 

Choose MVC,

 

So, Now we need data to send it to our HTML page and display it on FancyGrid.

First, we need to create new Class in Models folder and call it Student.

 

Next Step, Create Folder Call it Services will put inside it,

a new class (IStudent class).

 

 

After Create our Interface, we need to create Repository Folder with StudentRepository class.

In StudentRepository Class, I have fake data just to show you how it will be in our HTML page.

sure you can Use data from your SQL Server database, using Entry Framework.

part2

JsonResult Class in MVC Part .1

by

JsonResult is an ActionResult type in MVC. It helps to send the content in JavaScript Obect Notation (JSON) format.you will get an idea of the following things.

  1. About JsonResult and its properties
    • ContentEncoding
    • ContentType
    • Data
    • JsonRequestBehavior
    • MasJsonLength
    • RecursionLimit
  2. Sample project with various scenarios using JsonResult:
    • Send JSON content welcome note based on user type
    • Get the list of users in JSON Format
    • How to create JSON data at the client side and send it to the controller
    • How to handle a huge amount of JSON Data

 

JsonResult and its properties

The JSON format is an open standard format. The format of data looks very easy to understand and the data objects consist of attribute-value pairs.

ContentEncoding: It helps to indicate the content encoding type, the default encoding for JSON is UTF-8.

ContentType: It helps to indicate the content type. The default content type for JSON is application/json; charset=utf-8.

Note: ContentType and ContentEncoding are not necessary to mention when sending the data in JSON format as the HTTP headers are having a responsibility to tell the recipient what kind of content they're dealing with.

Data: This indicates what the content data is, that means what you will send in JSON format.

JsonRequestBehavior: This property has two options. Those are AllowGet and DenyGet. The default option is DenyGet. When you send data in JSON format, using Get Request, it's necessary to specify the property as AllowGet otherwise it shows the error as “The request would be blocked since the JSON data is considered as sensitive data information”.

MaxJsonLength: This helps to get or set the maximum JSON content length that you will send. The default value for this is 2097152 characters, that is equal to 4 MB of Unicode string data. You can even increase the size based if needed, for that you will get an idea later in this article.

RecursionLimit: Indicates the constraining number of object levels to process. The default value is 100. It means you can serialize the objects that are nested to a depth of 100 objects referencing each other. In a general scenario the default limit 100 is obviously sufficient when you deal with a JsonResult so there is no need to increase it even though you have the option to increase the limit if required.

 

 

Source:c-sharpcorner , MSDN