European ASP.NET MVC 4 and MVC 5 Hosting

BLOG about ASP.NET MVC 3, ASP.NET MVC 4, and ASP.NET MVC 5 Hosting and Its Technology - Dedicated to European Windows Hosting Customer

ASP.NET MVC Hosting UK - HostForLIFE.eu :: How to Use Automapper with ASP.NET MVC Application

clock November 8, 2019 11:20 by author Peter

At this moment, I will show you How to Use Automapper with ASP.NET MVC Application. Automapper could be a convention primarily based object - object mapper. it's offered in GitHub. Here I make a case for about a way to use Automapper to map between domain model objects and think about model objects in ASP.NET MVC applications.  Install Automapper to the project through Nuget.

Consider there's a powerfully typed view that expects a model object of type EmployeeViewModel. thus after querying with the Emplyee model object, we want to map this to EmployeeViewModel object.
public class Employee
   {
      public int EmployeeId { get; set; }
      public string EmployeeName { get; set; }
    }

And my employee view model
public class EmployeeViewModel
    {
        public int EmployeeId { get; set; }
        public string EmployeeName { get; set; }

    }

The use of AutoMapper
AutoMapper is designed within the web project. to form this more maintainable, create a folder (say Mappings) within the solution. Here we will produce 2 profile classes.  One for mapping from domain model object to look at model object and another one for reverse mapping.

public class DomainToViewModelMappingProfile : Profile
    {
        public override string ProfileName
        {
            get { return "DomainToViewModelMappings"; }
        }
        protected override void Configure()
        {
            Mapper.CreateMap<Employee, EmployeeViewModel>();
        }
    }
public class ViewModelToDomainMappingProfile : Profile
    {
        public override string ProfileName
        {
            get { return "ViewModelToDomainMappings"; }
        }
        protected override void Configure()
        {
            Mapper.CreateMap<EmployeeViewModel, Employee>();
        }
    }

Now create a configuration class within Mappings folder.
public class AutoMapperConfiguration
    {
        public static void Configure()
        {
            Mapper.Initialize(x =>
            {
                x.AddProfile<DomainToViewModelMappingProfile>();
                x.AddProfile<ViewModelToDomainMappingProfile>();
            });
        }
    }

And then call this configuration from global.asax.
AutoMapperConfiguration.Configure();

And from the controller simply map the employeeObject (domain model object) to employeeViewModelObject (view model object).
var employeeViewModelObject = Mapper.Map<Employee, EmployeeViewModel>(employeeObject);

In advanced situation we will even customise the configuration. for instance we will map a specific property from source to destination.
Mapper.CreateMap<X, XViewModel>()
.ForMember(x => x.Property1, opt => opt.MapFrom(source => source.PropertyXYZ));

Automapper provides extremely an improved and straightforward way to map between objects.



Silverlight 6 Hosting Netherlands - Cookie with JavaScript in Silverlight

clock November 1, 2019 11:07 by author Peter

Cookies are knowledge stored by the web browser, as easy as that. you'll be able to save something; yes I said anything, in cookies. I will conjointly do that through Silverlight itself, except for fun let's attempt doing it with JavaScript Silverlight 6. With this method we tend to follow, we'll be accessing JavaScript's function from Silverlight. This sometime becomes a headache for many developers.

The first step towards setting cookies through JavaScript, is to call the JavaScript function from Silverlight. Calling a JavaScript function from Silverlight is extremely straightforward. to know this, and more forthcoming things, produce a brand new Silverlight application "JavaScriptTweaks". Open JavaScriptTweaksTestpage.aspx, and add the subsequent code somewhere with <head> tag:
<script type="text/javascript">
    function SayHello()
   {
        alert("Hello!");
   }
</script>

Next step in the mainpage.cs inside the constructor add the code below:
HtmlPage.Window.Invoke("SayHello");
When you run the application, what you will see is a message box that pops up saying Hello at the very beginning of the app.

Now, we want to Setting the Cooking. Remove the SayHello function from the JavaScript. Write the following code:
function SetCookie(cookieName, cookieValue, Days)
{           
    var todayDate = new Date();
    var expireDate = new Date();
    if (Days == null || Days == 0) Days = 1;
    expire.setTime(todayDate.getTime() + 3600000 * 24 * Days);
    document.cookie = cookieName + ":" + cookieValue
    + ";expires=" + expireDate.toGMTString();          
}
Next step, call the function SetCookie with this code:
HtmlPage.Window.Invoke("SetCookie", "Name", "Peter", 5);


On the code above will call SetCookie function with the parameters cookieName "Name", cookieValue "Peter" and validity, in other words Days as "5". Line #5 of the function will set the expiry time period of cookies, which is in milliseconds and is about 432000000 for 5 days. Line #6 of the function will set the cookie's information like, its Name, Value and Expiry date. Our cookie is set to give information.

Now, we want to retrieve the information. Create three buttons in the XAML of the main page, 1 for each setcookie, getcookie and deletecookie.

Copy the function on the main page to the click event of the SetCookie Button.  And here is the code that I used:
function GetCookie(cookieName)
{
   var allcookies = document.cookie;
   // Get all the cookies in an array
   var cookiearray = allcookies.split(';');
   for (var i = 0; i < cookiearray.length; i++)
   {
       var nameOfCookie = cookiearray[i].split('=')[0];
       if (cookieName == nameOfCookie)
       {
           return cookiearray[i];
    }
 }
           return null;
}

Pass in the cookie name (which in our case is "Name") &  the function can return the entire cookie. On the GetCookie button select event and we should call this function. Write the following code:
private void ButtonGet_OnClick(object sender, RoutedEventArgs e)
{
    var cookie = HtmlPage.Window.Invoke("GetCookie", "Name");
    if (cookie == null)
    {
        MessageBox.Show("No cookie found");
        return;
    }
    MessageBox.Show(cookie.ToString().Split('=').LastOrDefault());
}

This will pop up a message box, showing the value of the cookie specified. Since I have my cookie as "name=Peter" it shows me "Peter".
Finally we want delete a cookie. You need to set the expiry date to a previous date. That can be done thorugh JavaScript's function as follows:
function DeleteCookie(cookieName)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    document.cookie = cookieName + "=;expires=" + exp.toGMTString();
}
In the delete button click event call this function as:
private void ButtonDelete_OnClick(object sender, RoutedEventArgs e)
{
    HtmlPage.Window.Invoke("DeleteCookie", "Name");
}


Pass within the name of the cookie you wish to delete and bang! it'll be deleted. currently simply do this. Click on SetCookie, it'll set the cookie for you. now click on GetCookie to verify whether or not it did set a cookie or not, you ought to see the value of the cookie within the message box. Click on Deletecookie to delete the cookie. Finally click on Getcookie button once more, if everything worked fine then you ought to see a message within the message box saying: "No cookie found".

HostForLIFE.eu Silverlight 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.



ASP.NET MVC Hosting - HostForLIFE.eu :: ASP.NET MVC 5 Create Shared Razor Layout And ViewStart

clock October 25, 2019 09:18 by author Peter

In article, I have shared a way to create a Layout Razor and ViewStart in ASP.NET MVC 5.
 
Views/Shared
You need to create a shared folder, "Shared" in the Views directory.
 
Go Views/Shared directory and create new _LayoutPage1.cshtml file and write the following below code.
    <!DOCTYPE html> 
     
    <html> 
    <head> 
        <meta name="viewport" content="width=device-width" /> 
        <title>@ViewBag.Title</title> 
    </head> 
    <body> 
        <div> 
            @RenderBody() 
        </div> 
    </body> 
    </html> 


The @RenderBody()
Use display content in multiple controllers to View.

Example you can have a fixed header and footer in the page. Only change will be the content of the RenderBody() called in the code.
    <html> 
    <head> 
        <meta name="viewport" content="width=device-width" /> 
        <title>@ViewBag.Title</title> 
    </head> 
    <body> 
        <div class="header"> 
            <!--code header fixed--> 
        </div> 
        <div> 
            @RenderBody() 
        </div> 
        <div class="footer"> 
            <!--code footer fixed--> 
        </div> 
    </body> 
    </html> 


So you have fixed the (header/footer) for the website.
 
Okay, you need using _LayoutPage1.cshtml, so you to Views/Home/index.cshtml. Open it, pass the following below code.
    @{ 
        ViewBag.Title = "Index"; 
        Layout = "~/Views/Shared/_LayoutPage1.cshtml"; 
    } 


_ViewStart.cshtml used to define the layout for the website. You can set the layout settings as well, if HomeController is using Layout.
 
_LayoutHome.cshtml or AdminController is _LayoutAdmin.cshtml
    //Views/ViewStart.cshtml 
    @{ 
        Layout = "~/Views/Shared/_LayoutPage1.cshtml"; 
    } 


You can configuration _ViewStart.cshtml the following below code.
    @{ 
     
        string CurrentName = Convert.ToString(HttpContext.Current.Request.RequestContext.RouteData.Values["Controller"]); 
        string clayout = ""; 
        switch (CurrentName) 
        { 
            case "Home": 
                clayout = "~/Views/Shared/_LayoutHome.cshtml"; 
                break; 
            default: 
                //Admin layout   
                clayout = "~/Views/Shared/_LayoutAdmin.cshtml"; 
                break; 
        } 
        Layout = clayout; 
     
    } 

This gives you an idea, how to use a Razor layout in various pages.

 



ASP.NET MVC 5 Hosting - HostForLIFE.eu :: What is And Why We Do State Management In ASP.NET MVC

clock October 17, 2019 11:58 by author Peter

If your website consists of multiple pages and you want to share the data appearing on the 2nd page to the 4th page, then you will have to use State Management feature of ASP.NET. Since our whole communication through the internet is done using HTTP Protocol and when a client(Browser) sends request to the server then it establishes a connection using HTTP and server gives the response, after that, connection will be disconnected. Actually each time a connection is created for a request and after the response it will be disconnected, which means if you have some data on first page and want to get it on the 10th, then it will be impossible to do it without state management feature. If you don’t use this feature then you will have to go the database for each single request(if you require data) which creates huge network traffic with increasing number of users.

You can manage the state by the following ways,

    Client Side State Management

        Cookie
        QueryString
        Hidden Form Field

    Server Side State Management

        Session
        TempData

Note
Client Side Management means nothing will be stored on server side but on client side and reverse will happen on server side. (i.e. all data will be on server side)
 
Client Side State Management
 
Cookie
 
Cookie is a text file with some information in it, generated by the most websites that you visit and then saved it in your browser(folder or subfolder) if you have enabled the cookie option.
 
Advantages

    All information is stored on client side.
    With cookie you can use the remember me option, some websites that you visit first time which then asks you or you can choose a language of your choice and then the information on website appears in that particular language every time you visit(depends upon expiry date). Also, you have seen some time, that this kind of option will work on your machine(laptop) not on your other devices, so behind the scenario there is a cookie.

Disadvantages

    You can disable cookies in your browser settings. This is a major drawback and if you have use cookies in your site for some features then it will cost you badly.
    Less secure since you can view the data in cookies by opening DevTools(in chrome)

Cookie types

    Persistent (Can specify expiry time)
    Non Persistent(Use for sessions and will expire as the browser or tab is closed in which the web app is opened)

The recommended Data limit: 4096bytes(4kb). Size should not exceed this value as you send data (>4KB) using cookie on every request, then more broadband is used because in some scenarios uploading speed can be lesser.
 
QueryString
 
With QueryString, you can specify the data in the URL tab.

    Starts with a question mark(?)
    If there are two values that you are sending, then it will be separated with &.

    There is no limit on length of queryString but the most recommended length for query string is 1024 characters. Try your queryString to be in that range because some web servers will through 413 error(Entity too long to respond)

Advantages

    Can’t be disabled by client
    Can be used to share information between pages and most suitable where the information is static(remains static for whole website)

    e.g.You request to go the specific page but the login is required and you fill the form successfully and then redirected to page where you were before login.

Disadvantages

    You require information on 4th page which is present on 1st page, then you will have to fetch the info again from the database and then send it(if the data is dynamic or changed in recent activity)
    The information that we send using QueryString gets visible to all users so it can’t be used to send sensitive data but if require then encrypt it then send.(an extra effort)

Hidden Field

    Share information between multiple requests on same page.
    If there is Single page application(SAP) or there is a page like login page where you given three attempts to user for entering right username and password then you can use it as a counter.

 
Advantages
 
Can’t be disabled by client.
 
Disadvantages
 
Need Encryption because the value can be seen by using DevTools of browser.



ASP.NET MVC Hosting - HostForLIFE.eu :: Preventing Cross Site Request Forgery In MVC

clock September 26, 2019 11:14 by author Peter

What is Cross-Site Request Forgery
Cross-Site Request Forgery (CSRF) is a process in which a user first signs on to a genuine website (e.g. facebook.com) and after successful login, the user opens another website (malicious website) in the same browser.
 
Both websites are opened in the same browser. Malicious website will display some links to the user and asks the user to click on those links. User clicks on the links displayed on a malicious website, the malicious website sends a request using the existing session of genuine website. Web server of genuine website treats this request as a valid request and assumes that it is coming from a valid user so it executes the request and provides a proper response. A malicious website can perform harmful operations on genuine website.
 
In order to solve this problem, we expect the Action Method of genuine website to recognize the source of the request, whether the request is coming from genuine website or from a malicious website. This can be achieved by using the [ValidateAntiForgeryToken] attribute in ASP.Net MVC.
 
How to Implement CSRF Security in MVC
In order to implement CSRF security in MVC, first, we need to use HTML helper @Html.AntiForgeryToken() in view. It should be placed inside the BeginForm() method in view.
 
Next, we need to add [ValidateAntiForgeryToken] attribute on the action method which will accept HTTP post request. We need to do only these 2 changes and now MVC will prevent CSRF attacks.
 
How ValidateAntiForgeryToken works
How ValidateAntiForgeryToken prevents CSRF attacks?


First, the user will open genuine website in the browser. User login to genuine website. After login, genuine website sends Authentication cookie and Verification token. Verification token has randomly generated alphanumeric values. The verification token is stored in the cookie as well as in hidden field on client-side. When HTML form is submitted to the server, the verification token is submitted as a cookie as well as a hidden field. On the server-side, both are checked if they are same or not? If both are same then request is valid. If they are different or one of them is missing then request is treated as invalid request and will be rejected automatically by MVC.
 
When a user opens a malicious website in a new tab of the same browser, the malicious website will display some links and ask the user to click on those links. This website already has a script to send the request to genuine website. When the user clicks on links, the malicious website sends a request to genuine website. Since request is being sent to genuine website, the browser automatically submits Authentication cookie to Action method of genuine website but here, the hidden field is missing. The Action method has [ValidateAntiForgeryToken] attribute so it checks whether Authentication cookie and hidden field has same value but here, the hidden field is missing so the request is treated as invalid and it is rejected by MVC.
 
Practical Implementation
Wherever you have a Form, use @Html.AntiForgeryToken() inside the form and action method for accepting the HTTP Post should have ValidateAntiForgeryToken attribute. These are the only change, the rest of the process will be taken care of by ASP.Net MVC.
 
Please see the below HTML view where I have added@Html.AntiForgeryToken()
    @using (Html.BeginForm("Create", "Products", FormMethod.Post, new { enctype = "multipart/form-data" })) 
    { 
       @Html.AntiForgeryToken() 
       <div class="form-row"> 
       <div class="form-group col-md-6"> 
          @Html.LabelFor(temp => temp.ProductName) 
          @Html.TextBoxFor(temp => temp.ProductName, new { placeholder = "Product Name", @class = "form-control" }) 
          @Html.ValidationMessageFor(temp => temp.ProductName) 
       </div> 
    <div class="form-group col-md-6"> 
       @Html.LabelFor(temp=>temp.Price) 
       @Html.TextBoxFor(temp=>temp.Price,new { @class="form-control",placeholder="Price"}) 
    </div> 
    </div> 
    @Html.ValidationSummary() 
       <button type="submit" class="btn btn-success">Create</button> 
       <a class="btn btn-danger" href="/products/index">Cancel</a> 
    } 

Below is the action method where I have added [ValidateAntiForgeryToken] attribute.
    [HttpPost] 
    [ValidateAntiForgeryToken] 
    public ActionResult Create(Product p) 
       { 
       ProductDBContext db = new ProductDBContext(); 
       if (ModelState.IsValid) 
       { 
          db.Products.Add(p); 
          db.SaveChanges(); 
          return RedirectToAction("Index"); 
       } 
       else 
       { 
          return View(); 
    } 
    } 

Summary
In this blog, I have explained Cross-Site Request Forgery(CSRF), its steps and what changes we need to do in MVC application to prevent CSRF attacks.



ASP.NET MVC 5 Hosting - HostForLIFE.eu :: Bootstrap Tab Strip in ASP.NET MVC

clock September 18, 2019 12:47 by author Peter

In this post, we will see how to render given below bootstrap Tab script in Asp.net MVC 5 view.

Here the number of tabs displayed in view would depend on count of members in the list.

1. Create ASP.NET MVC 5 project.
 
2. Define Member class as follows in “Member.cs” file
    public class Member 
    { 
    public int Id { get; set; } 
    public string Name { get; set; } 
    } 

3. Add view to create action method and pass a list of members from controller Action method to razor view file. i.e. “create.cshtml”
    public ActionResult Create() 
    { 
    List<Member> members = new List<Member>(); 
    members = GetMemberList(); 
    return View(members); 
    } 
    private List<Member> GetMemberList() 
    { 
    List<Member> members = new List<Member>(); 
    members.Add(new Member{ Name = "member1" }); 
    members.Add(new Member { Name = "member2" }); 
    members.Add(new Member { Name = "member3" }); 
    members.Add(new Member { Name = "member4" }); 
    members.Add(new Member { Name = "member5" }); 
    return members; 
    } 


4. Using CSS classes, we can create a tabscript in our “create.cshtml” as shown below:
    @model IEnumerable<Member> 
    <div class="container"> 
    @if (Model.ToList().Count > 0) 
    { 
    <ul class="nav nav-tabs" role="tablist"> 
    @{int i = 0; 
    foreach (var item in Model) 
    { 
    if (i == 0) 
    { 
    <li class="nav-item"> 
    <a class="nav-link active" data-toggle="tab" href="#@item.Name">@item.Name</a> 
    </li> 
    } 
    else 
    { 
    <li class="nav-item"> 
    <a class="nav-link" data-toggle="tab" href="#@item.Name">@item.Name</a> 
    </li> 
    } 
    i++; 
    } 
    } 
    </ul> 
    <div class="tab-content"> 
    @foreach (var item in Model) 
    { 
    <div id="@item.Name" class="container tab-pane active"> 
    <br> 
    <h3>@item.Name 's Tab Area </h3> 
    </div> 
    } 
    </div> 
    } 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> 



ASP.NET MVC 6 Hosting - HostForLIFE.eu :: How To Use jQuery To Consolidate AutoComplete Function

clock September 13, 2019 11:51 by author Peter

jQuery UI has an AutoComplete widget. The AutoComplete widget is quite nice and straight forward to use. In this post, I will show you how to use jQuery AutoComplete widget to consolidate AutoComplete function in ASP.NET MVC application.

Step 1

The first step is to add the jQuery scripts and styles. With ASP.NET MVC, the following code does the work:

@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/jquery")   
@Scripts.Render("~/bundles/jqueryui")

Step 2

Using the AutoComplete widget is also simple. You will have to add a textbox and attach the AutoComplete widget to the textbox. The only parameter that is required for the widget to function is source. For this example, we will get the data for the AutoComplete functionality from a MVC action method.

$(document).ready(function () {
    $('#tags').autocomplete(
        {
            source: '@Url.Action("TagSearch", "Home")'
    });
})

In the above code, the textbox with id=tags is attached with the AutoComplete widget. The source points to the URL of TagSearch action in the HomeController: /Home/TagSearch. The HTML of the textbox is below:

<input type="text" id="tags" />


Step 3

When the user types some text in the textbox, the action method (TagSearch) is called with a parameter in the request body. The parameter name is term. So, your action method should have the following signature:

public ActionResult TagSearch(string term)
{
    // Get Tags from database
    string[] tags = { "ASP.NET", "WebForms",
                    "MVC", "jQuery", "ActionResult",
                    "MangoDB", "Java", "Windows" };
    return this.Json(tags.Where(t => t.StartsWith(term)),
                    JsonRequestBehavior.AllowGet);
}

Now, the AutoComplete functionality is complete!

HostForLIFE.eu ASP.NET MVC 6 Hosting
HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes. We have customers from around the globe, spread across every continent. We serve the hosting needs of the business and professional, government and nonprofit, entertainment and personal use market segments.

 



ASP.NET MVC Hosting UK - HostForLIFE.eu :: Session Handling for Synchronous/Asynchronous Requests in ASP.NET MVC Hosting with jQuery

clock September 6, 2019 12:18 by author Peter

Basic use of session in ASP.NET MVC is as follows:

  • Check user is logged in or not
  • to carry authorization data of user logged in
  • to carry temporary alternative data
  • Check session Timeout on user action for every controller

Using asynchronous (AJAX) request it's a very common state of affairs to use jquery AJAX or unobtrusive AJAX API of ASP.NET MVC 5 to create asynchronous request in MVC 5. Each jquery AJAX and unobtrusive AJAX square measure very powerful to handle asynchronous mechanism. however in most things, we like better to use jquery AJAX to possess fine tuned control over the application. And currently suppose we wish to see the session timeout for every asynchronous call in our application. we are using JSON to grab an information on form and send it with asynchronous request. Therefore we dropped in situation where:

1. Normal direct won’t work well
RedirectToAction("LoginView", "LoginController");

2. We need to ascertain session timeout in action technique. A repetitive code in every action method therefore reduced code reusability and maintainability.

if (session.IsNewSession || Session["LoginUser"] == null) { //redirection logic 

We can use base controller class or take advantage of action filters of ASP.NET MVC 5. using base controller class and preponderant OnActionExecuting methodology of Controller class:
public class MyBaseController : Controller

{

    protected override void OnActionExecuting(ActionExecutingContext filterContext)

   {

        HttpSessionStateBase session = filterContext.HttpContext.Session;
        if (session.IsNewSession || Session["LoginUser"] == null)

        {

            filterContext.Result = Json("Session Timeout", "text/html");

        }

   }

}

And inheriting Base Class:

public class MyController : BaseController

{

//your action methods…

}

Limitation of this approach is that it covers up every action method.Using action filter attribute class of ASP.NET MVC 5. Therefore we will fine tune every controller action as needed.
      [AttributeUsage(AttributeTargets.Class |

    AttributeTargets.Method, Inherited = true, AllowMultiple = true)]

     public class SessionTimeoutFilterAttribute : ActionFilterAttribute

     {
   
       public override void OnActionExecuting(ActionExecutingContext filterContext)

    {

       HttpSessionStateBase session = filterContext.HttpContext.Session;

        // If the browser session or authentication session has expired

        if (session.IsNewSession || Session["LoginUser"] == null)

        {

            if (filterContext.HttpContext.Request.IsAjaxRequest())

            {

                
JsonResult result = Json("SessionTimeout", "text/html");
                filterContext.Result = result;

            }

            else

            {

                // For round-trip requests,

               filterContext.Result = new RedirectToRouteResult(

                new RouteValueDictionary {

                { "Controller", "Accounts" },

                { "Action", "Login" }

                });

            }

        }

        base.OnActionExecuting(filterContext);

    }

}


Jquery code at client side

$.ajax({

    type: "POST",

    url: "controller/action",

    contentType: "application/json; charset=utf-8",

    dataType: "json",

    data: JSON.stringify(data),

    async: true,

    complete: function (xhr, status) {

            if (xhr.responseJSON == CONST_SESSIONTIMEOUT) {

                RedirectToLogin(true);

                return false;

            }

            if (status == 'error' || !xhr.responseText) {

                alert(xhr.statusText);

            }

       }

    });




ASP.NET MVC Hosting - HostForLIFE.eu :: Dynamic am-Charts In ASP.NET MVC

clock July 30, 2019 12:17 by author Peter

Here, we will learn about creating dynamic am-charts in ASP.NET MVC 5. Charts are very useful for seeing how much work is done in any place in a short period of time.

Prerequisites

  • Basic knowledge of jQuery.
  • Data from which we can generate the charts.

Create a new project in ASP.NET MVC
We are going to use the following jQuery libraries provided by amCharts.
<script src="https://www.amcharts.com/lib/4/core.js"></script>    
<script src="https://www.amcharts.com/lib/4/charts.js"></script>     
<script src="https://www.amcharts.com/lib/4/plugins/forceDirected.js"></script>    
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script> 
    

We are going to use the dummy API for the chart data.
https://api.myjson.com/bins/zg8of

Open the View -> Home -> Index.cshtml and write the code for generating the chart.
@{    
ViewBag.Title = "AM Chart Demo";    
}    

<div id="chartData"></div>    

@Scripts.Render("~/bundles/jquery")    

<script src="https://www.amcharts.com/lib/4/core.js"></script>    
<script src="https://www.amcharts.com/lib/4/charts.js"></script>    
<script src="https://www.amcharts.com/lib/4/plugins/forceDirected.js"></script>    
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>    

<script>    
$(document).ready(function () {    
$.ajax({    
    url: 'https://api.myjson.com/bins/zg8of',    
    method: 'GET', success: function (data) {    
        generateChart(data);    
    }, error: function (err) {    
        alert("Unable to display chart. Something went wrong.");    
    }    
});    

function generateChart(data, iteration = 0) {    
    var dates = [];    
    var newData = [];    
    var gr = [];    

    function groupBy(array, f) {    
        var groups = {};    
        array.forEach(function (o) {    
            var group = JSON.stringify(f(o));    
            groups[group] = groups[group] || [];    
            groups[group].push(o);    
        });    
        return Object.keys(groups).map(function (group) {    
            return groups[group];    
        })    
    }    
    var result = groupBy(data, function (item) {    
        return ([item.Name]);    
    });    
    $.each(result, function (a, b) {    
        var d1 = b.map(function (i) {    
            return i.Month;    
        });    
        $.extend(true, dates, d1);    
    });    
    $.each(dates, function (a, b) {    
        var item = {    
            sales_figure: b    
        };    
        $.each(result, function (i, c) {    
            el = c.filter(function (e) {    
                return e.Month == b;    
            });    
            if (el && el.length > 0) {    
                item[c[i].Name.toUpperCase()] = el[0].Sales_Figure;    
                if (gr.filter(function (g) {    
                    return g == c[i].Name.toUpperCase();    
                }).length <= 0) {    
                    gr.push(c[i].Name.toUpperCase());    
                }    
            }    
        });    
        if (Object.keys(item).length > 1) newData.push(item);    
    });    
    $chartData = $('#chartData');    
    var am_el = $('<div id="dc-' + iteration + '" class="col-md-12 col-xs-12 card-item">');    
    am_el.append($('<div class="lgnd col-md-12 col-xs-12 bb2"><div id="l-' + iteration + '" class="col-md-12 col-xs-12"></div></div>'));    
    am_el.append($('<div id="c-' + iteration + '" class="col-md-12 col-xs-12" style="min-height:250px ; margin-left: -8px;">'));    
    $chartData.html(am_el);    
    var chart = am4core.create("c-" + iteration, am4charts.XYChart);    
    am4core.options.minPolylineStep = Math.ceil(newData.length / 50);    
    am4core.options.commercialLicense = true;    
    am4core.animationDuration = 0;    
    chart.data = newData;    
    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());    
    categoryAxis.dataFields.category = "sales_figure";    
    categoryAxis.renderer.minGridDistance = 70;    
    categoryAxis.fontSize = 12;    
    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());    
    valueAxis.fontSize = 12;    
    valueAxis.title.text = "Sales Figure";    
    chart.legend = new am4charts.Legend();    
    chart.legend.position = "top";    
    chart.legend.fontSize = 12;    
    var markerTemplate = chart.legend.markers.template;    
    markerTemplate.width = 10;    
    markerTemplate.height = 10;    
    var legendContainer = am4core.create("l-" + iteration, am4core.Container);    
    legendContainer.width = am4core.percent(100);    
    chart.legend.parent = legendContainer;    
    var legendDiv = document.getElementById("l-" + iteration);    

    function resizeLegendDiv() {    
        legendDiv.style.height = chart.legend.measuredHeight + "px";    
        legendDiv.style.overflow = "hidden";    
    }    
    chart.legend.events.on('inited', resizeLegendDiv);    
    chart.colors.list = [am4core.color("#0D8ECF"), am4core.color("#FF6600"), am4core.color("#FCD202"), am4core.color("#B0DE09"), am4core.color("#2A0CD0"), am4core.color("#CD0D74"), am4core.color("#CC0000"), am4core.color("#00CC00"), am4core.color('#ffd8b1'), am4core.color("#990000"), am4core.color('#4363d8'), am4core.color('#e6194b'), am4core.color('#3cb44b'), am4core.color('#ffe119'), am4core.color('#f58231'), am4core.color('#911eb4'), am4core.color('#46f0f0'), am4core.color('#f032e6'), am4core.color('#bcf60c'), am4core.color('#fabebe'), am4core.color('#008080'), am4core.color('#e6beff'), am4core.color('#9a6324'), am4core.color('#fffac8'), am4core.color('#800000'), am4core.color('#aaffc3'), am4core.color('#808000'), am4core.color('#ffd8b1'), am4core.color('#000075')] $.each(gr, function (l, d) {    
        var series = chart.series.push(new am4charts.LineSeries());    
        series.dataFields.valueY = d;    
        series.name = d;    
        series.dataFields.categoryX = "sales_figure";    
        series.tooltipText = "{name}: [bold]{valueY}[/]";    
        series.strokeWidth = 2;    
        series.minBulletDistance = 30;    
        series.tensionX = 0.7;    
        series.legendSettings.labelText = "[bold]" + "{name}";    
        var bullet = series.bullets.push(new am4charts.CircleBullet());    
        bullet.circle.strokeWidth = 2;    
        bullet.circle.radius = 3;    
        bullet.circle.fill = am4core.color("#fff");    
        var bulletbullethover = bullet.states.create("hover");    
        bullethover.properties.scale = 1.2;    
        chart.cursor = new am4charts.XYCursor();    
        chart.cursor.behavior = "panXY";    
        chart.cursor.snapToSeries = series;    
    });    
    chart.scrollbarX = new am4core.Scrollbar();    
    chartchart.scrollbarX.parent = chart.bottomAxesContainer;    
}    

});    
</script>  
 

Output

 

 



ASP.NET MVC Hosting - HostForLIFE.eu :: Install MVC 4 in Visual Studio 2010

clock June 28, 2019 09:43 by author Peter

We can develop MVC applications in Visual Studio 2010. Visual Studio 2010 includes MVC 2 by default. We can also install both MVC 3 and MVC 4 in Visual Studio 2010. In this article, I go through step-by-step how to install MVC 4 in Visual Studio 2010.

ASP.NET MVC 4 includes all features of MVC 3 and also includes the following:

  • The ASP.NET Web API is a framework for building and consuming HTTP services that can reach a broad range of clients, including browsers, phones, and tablets. The ASP.NET Web API is great for building services that follow the REST architectural style, plus it supports RPC patterns.
  • ASP.NET Web Pages and the new Razor syntax provide a fast, approachable, and lightweight way to combine server code with HTML to create dynamic web content.
  • Web Optimization is a framework for bundling and minifying scripts and CSS files.
  • NuGet, a free, open source developer focused package management system for the .NET platform is intended to simplify the process of incorporating third-party libraries into a .NET application during development.

Step 1: Download and Install Visual Studio 2010 Service Pack 1

Visual Studio 2010 SP1 is required to use MVC 4 in Visual Studio 2010 so we need to install it on our machine then install MVC 4. We can download it from the Microsoft Download Center and go through the following link.
http://www.microsoft.com/en-in/download/details.aspx?id=23691

We download the "VS10sp1-KB983509.exe" file and click on it and follow the steps as given in the process. But it is a web platform install so we need an internet connection to install VS SP1. If we want to install VS SP1 without an internet connection then we need to download the ISO file of VS SP 1. We can download the ISO file for VS SP1 from the same link under Install Instructions. Its size is 1.48 GB (1,590,734,349 bytes).


After installation of VS 2010 SP 1 we wil proceed to install MVC 4.

Step 2: Download MVC 4
We can download MVC 4 from the Microsoft Download Center and go through the following link:
http://www.microsoft.com/en-us/download/details.aspx?id=30683


Click on the "Download" button and the download will start within 30 seconds.

Step 3: Run MVC 4
Now we have the MVC 4 set up file ("AspNetMVC4Setup.exe") to install MVC 4. Double-click on it and it runs.

Accept the License Agreement and click on "Install".

The screen above takes several minutes so don't click on cancel or close window. After a successful installation, we get a success message on the installation screen.


Step 4: Check whether the install was successful
Now we will create a new project from Visual Studio 2010.
Go to "File" -> "New" -> "Project...".

We are notified that the MVC 4 template is ready to be used in Visual Studio 2010 so MVC 4 is successfully installed and ready to use.



About HostForLIFE.eu

HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes.

We have offered the latest Windows 2016 Hosting, ASP.NET Core 2.2.1 Hosting, ASP.NET MVC 6 Hosting and SQL 2017 Hosting.


Tag cloud

Sign in