In MVC, getting result from DB, and display in View

01. September 2016 Back-end, C#, HTML5, jQuery, MVC, SQL 0

Using Entity Framework, to retrieve data from database in Controller, and return it as Json back to View:



After define this function (GetTermsCondition() in OrgController), and let’s go back to View,  to see how to display the data:



In this part, we are easy to find out that under <div> tag, I am calling Html function to start displaying the data as Form, in Html function, it is calling GetTermsConditions function in OrgController, and at same time, giving it a specific id (orgTermsConditions):

using (Html.BeginForm(“GetTermsConditions”,”Org”,FormMethod.Post, new {@id = “orgTermsConditions”}))

In here, I want to display the “CreatedOn” column in the View, before we are going to use jQuery to display data, let’s get familiar with the data model first:



This is model, we could see there are 8 fields, but in first step, I want to display only TermConditions;

So let’s see how to use jQuery to automatic display the data according to our specific requirement:



Here are few tricky issues, firstly, I want to display “CreatedOn” as the format – “dd/mm/yyyy”, but in jQuery function, I could not format it as normal method because when I try to get one of “CreatedOn”, I realize that it is a ‘string’ with ‘/Date’ prefix, then I am using slice() to get the ‘number’ part (this number is millisecond),  then convert it into ‘int’, and .toLocaleDateString, otherwise, I could not display it correctly; secondly, I have to assign the id of return data to each of a link’s value to be a parameter to pass to another function in later on, and using ‘class’ to get all links, and assign their ‘href’ to a right URL with right id, which means I could pass the right id as a parameter to an appropriate function.

So let’s the function that how to get data and pass result to the view:



It is almost same as the previous one, and this controller to return to the View (TermsAndConditions):



In this part, do not forget declare we are going to use Model, and this Model must be IEnumberable<….OrgTermsAndConditionsModel>; as well as we could directly to show “TermConditons” from the returned data, but even we have only one record in the returned data, I also need use foreach to let compiler know there is only one record, otherwise, it could not be able to know this automatically; last issue in this part is the “TermConditions” from database contains some HTML tags, and it could not be striped correctly, rather than display them directly, which it is not the final view that we want to see, so let’s give the id for the displaying container (id =”test”),  and using jQuery .html() to let all HTML tags included in the “string” work correctly.

Until here, the whole process is done, and all things are displayed correctly, during this process, there are few tricky issues, and let’s remember them, and avoid to fall into their traps in the future.

Leave a Reply