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 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);

            }

       }

    });




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