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 - HostForLIFE.eu :: Bootstrap Modal PopUp Using ASP.NET MVC

clock June 20, 2025 08:20 by author Peter

We can show and hide the modal using the methods provided by Bootstrap Modal plugin.


Description
We are using modal ('show') and modal ('hide') methods to show and hide the login modal.

Reference
Before this article you should go through my Introduction to Bootstrap. Show Bootstrap Image Using Asp.Net MVC http://www.c-sharpcorner.com/blogs/bootstrap-image-show-using-asp-net-mvc3

Steps
Create a controller class file called "HomeController.cs" and add controller action method called "ModalPopUp()";
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.Mvc;  
  
namespace PeterMVCBootstrapImages.Controllers  
{  
    public class HomeController : Controller  
    {  
        //  
        // GET: /Home/  
  
        public ActionResult Index()  
        {  
            return View();  
        }  
  
        public ActionResult ModalPopUp()  
        {  
            return View();  
        }  
  
    }  


Then create a view file named "ModalPopUp.cshtml".
@{  
    ViewBag.Title = "
Peter Bootstrap PopUp";  
}  
  
<title>@ViewBag.Title</title>  
  
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">  
  
<style>  
    .button {  
        background-color: #4CAF50; /* Green */  
        border: none;  
        color: white;  
        padding: 15px 32px;  
        text-align: center;  
        text-decoration: none;  
        display: inline-block;  
        font-size: 16px;  
        margin: 4px 2px;  
        cursor: pointer;  
    }  
  
    .button1 {  
        border-radius: 2px;  
    }  
  
    .button2 {  
        border-radius: 4px;  
    }  
  
    .button3 {  
        border-radius: 8px;  
    }  
  
    .button4 {  
        border-radius: 12px;  
    }  
  
    .button5 {  
        border-radius: 50%;  
    }  
</style>  
<div>  
    <h2 style="background-color: Yellow;color: Blue; text-align: center; font-style: oblique">
Peter Bootstrap PopUp</h2>  
    <fieldset>  
        <legend style="color:orangered">Click On 
Peter Bootstrap PopUp</legend>  
        <div class="container">  
            <div class="row">  
                <div class="col-xs-12">  
  
                    <button id="btnShowModal" type="button"  
                            class="btn btn-sm btn-default pull-left col-lg-11 button button4">  
                        
Peter Modals  
                    </button>  
  
                    <div class="modal fade" tabindex="-1" id="loginModal"  
                         data-keyboard="false" data-backdrop="static">  
                        <div class="modal-dialog modal-lg">  
                            <div class="modal-content">  
                                <div class="modal-header">  
                                    <button type="button" class="close" data-dismiss="modal">  
                                        ×  
                                    </button>  
                                    <h4 class="modal-title">
Peter Login</h4>  
                                </div>  
                                <div class="modal-body">  
                                    <form>  
                                        <div class="form-group">  
                                            <input class="form-control" type="text"  
                                                   placeholder="Login Username" id="inputUserName" />  
                                        </div>  
                                        <div class="form-group">  
                                            <input class="form-control" placeholder="Login Password"  
                                                   type="password" id="inputPassword" />  
                                        </div>  
                                    </form>  
                                </div>  
                                <div class="modal-footer">  
                                    <button type="submit" class="btn btn-primary button button4">Sign</button>  
                                    <button type="button" id="btnHideModal" class="btn btn-primary button button4">  
                                        Hide  
                                    </button>  
                                </div>  
                            </div>  
                        </div>  
                    </div>  
  
                </div>  
            </div>  
        </div>  
    </fieldset>  
</div>  
    <footer>  
        <p style="background-color: Yellow; font-weight: bold; color:blue; text-align: center; font-style: oblique">  
            ©  
            <script> document.write(new Date().toDateString()); </script>  
        </p>  
    </footer>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">  
    </script>  
    <script src="bootstrap/js/bootstrap.min.js"></script>  
  
    <script type="text/javascript">  
        $(document).ready(function () {  
            $("#btnShowModal").click(function () {  
                $("#loginModal").modal('show');  
            });  
  
            $("#btnHideModal").click(function () {  
                $("#loginModal").modal('hide');  
            });  
        });  
    </script> 

Here all reference files like bootstrap.min.css and jquery.min.js and bootstrap.min.js should be added to
add bootstrap features.
 
I have added code for a button to perform modal popup.
<button id="btnShowModal" type="button"  
       class="btn btn-sm btn-default pull-left col-lg-11 button button4">  
   
Peter Modals  
</button> 

I have added code for the modal form to appear in a fade style.
<div class="modal fade" tabindex="-1" id="loginModal"  
     data-keyboard="false" data-backdrop="static"> 
   

Here is the code for size of the modal.
<div class="modal-dialog modal-lg"> 

Controls are added Inside Modal content such as  header text , buttons, cross symbol button, text boxes and related control properties:
<div class="modal-content">  
    <div class="modal-header">  
        <button type="button" class="close" data-dismiss="modal">  
            ×  
        </button>  
        <h4 class="modal-title">
Peter Login</h4>  
    </div>  
    <div class="modal-body">  
        <form>  
            <div class="form-group">  
                <input class="form-control" type="text"  
                       placeholder="Login Username" id="inputUserName" />  
            </div>  
            <div class="form-group">  
                <input class="form-control" placeholder="Login Password"  
                       type="password" id="inputPassword" />  
            </div>  
        </form>  
    </div>  
    <div class="modal-footer">  
        <button type="submit" class="btn btn-primary button button4">Sign</button>  
        <button type="button" id="btnHideModal" class="btn btn-primary button button4">  
            Hide  
        </button>  
    </div>  
</div> 

For cross symbol button in header part.
<button type="button" class="close" data-dismiss="modal">  
    ×  
</button> 

For Header part.
<div class="modal-header">  
   <button type="button" class="close" data-dismiss="modal">  
       ×  
   </button>  
   <h4 class="modal-title">
Peter Login</h4>  
</div> 

For textBoxes

<div class="modal-body">  
    <form>  
        <div class="form-group">  
            <input class="form-control" type="text"  
                   placeholder="Login Username" id="inputUserName" />  
        </div>  
        <div class="form-group">  
            <input class="form-control" placeholder="Login Password"  
                   type="password" id="inputPassword" />  
        </div>  
    </form>  
</div> 


For footer part.
<div class="modal-footer">  
    <button type="submit" class="btn btn-primary button button4">Sign</button>  
    <button type="button" id="btnHideModal" class="btn btn-primary button button4">  
        Hide  
    </button>  
</div> 

Here I added one javascript and added button id such as btnShowModal and btnHideModal to show and hide modal.

<script type="text/javascript">  
    $(document).ready(function () {  
        $("#btnShowModal").click(function () {  
            $("#loginModal").modal('show');  
        });  

        $("#btnHideModal").click(function () {  
            $("#loginModal").modal('hide');  
        });  
    });  
</script> 


Here I added css style to add style in buttons.
<style>  
    .button {  
        background-color: #4CAF50; /* Green */  
        border: none;  
        color: white;  
        padding: 15px 32px;  
        text-align: center;  
        text-decoration: none;  
        display: inline-block;  
        font-size: 16px;  
        margin: 4px 2px;  
        cursor: pointer;  
    }  
  
    .button1 {  
        border-radius: 2px;  
    }  
  
    .button2 {  
        border-radius: 4px;  
    }  
  
    .button3 {  
        border-radius: 8px;  
    }  
  
    .button4 {  
        border-radius: 12px;  
    }  
  
    .button5 {  
        border-radius: 50%;  
    }  
</style>   




ASP.NET MVC Hosting - HostForLIFE.eu :: Controllers in MVC: An Introduction

clock June 12, 2025 09:06 by author Peter

This article provides an overview of the Controller in MVC. As you know, MVC stands for Model , View and Controller; so, Controller plays a very important role in MVC. We'll learn the controller actions and action results in here and how the controllers are used to interact with the MVC applications.

Overview
The controller in MVC is responsible for responding the request made against the ASP.NET MVC Web Application. Each browser request is mapped to a specific controller that is defined in the MVC application.

Suppose you are entering the following URL in the browser:
http://localhost:1234/Sample

It means that the Controller is called SampleController. The browser is making a request to the controller so now the SampleController is responsible for providing the response to the browser. It might be possible that the controller returns a specific view back to the browser or the controller might redirect the user to another controller.

Getting Started
Let us create a Controller in a MVC application. To create a controller you must have the MVC application so at first we'll create the MVC application and then controller. Just follow the procedure below.

Step 1: Create an ASP.NET Web Application and enter the name as in the following:

Step 2: Select MVC Project Template in the One ASP.NET Wizard.

Step 3: In the Solution Explorer, right-click on the Controllers folder then click on "Add" -> "Controller...".

Step 4: Now select the MVC Empty Controller.

And enter the name as Sample as in the following:


After entering the controller name, using scaffolding there is a folder named Sample (the same name as the newly added controller) will be added automatically in the Views folder. Have a look:


Step 5: You can see the newly added controller has code as in the following:
    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Web;  
    using System.Web.Mvc;  
    namespace DemoMvc.Controllers  
    {  
        public class SampleController : Controller  
        {  
            // GET: Sample  
            public ActionResult Index()  
            {  
                return View();  
            }  
        }  
    } 

In the code above, you can see that the controller is created in the form of a class so you can say that it is just a class that is derived from the Controller class. This class inherits the Controller class (base class). In the next section, we'll understand the actions.

Overview of Actions in Controller

The actions are disclosed by the controller. An action is a method on a controller that is called when you enter a specific URL in the browser. Suppose you enter the following URL in the browser:
http://localhost:1234/Sample/Index

The Index() method is called through the preceding URL. This Index() method is stored in the SampleController. It is necessary that the access modifier of the action method must be public. This action method of any controller cannot be overloaded further and also cannot be a static method.

Overview of Action Results
As you can see in the preceding action method that the return type of that Index() action method is ActionResult, so an action method returns an action result. An action result is what a controller action returns in response to a browser request.

There are various types of action results supported in the MVC, as given below:

  • ViewResult: Represents HTML and markup.
  • EmptyResult: No Result
  • RedirectResult: a redirection to a new URL
  • JsonResult: a JSON result that is used in ajax app
  • JavaScriptResult: a JavaScript result
  • ContentResult: a text result

In most cases the controller action returns a ViewResult as in the following:
    public class SampleController : Controller  
    {  
        // GET: Sample  
        public ActionResult Index()  
        {  
            return View();  
        }  
    } 


You can see in the code above that the View is used to return a ViewResult. When this is returned, HTML is returned to the browser. You can see the methods of the controller base class:

  • View: Returns a ViewResult action result.
  • Redirect: Returns a RedirectResult
  • JSON: Returns a JsonResult
  • JavaScript: Returns a JavaScriptResult
  • RedirectToAction: Returns a RedirectToActionResult

So, suppose you want to redirect from one controller to another controller, you need to use the RedirectToAction() method. Have a look:
    using System.Web.Mvc;  
    namespace DemoMvc.Controllers  
    {  
        public class SampleController : Controller  
        {  
            // GET: Sample  
            public ActionResult Index()  
            {  
                return View();  
            }  
            public ActionResult SampleWorld()  
            {  
                return RedirectToAction("Welcome");  
            }  
            public ActionResult Welcome()  
            {  
                return View();  
            }  
        }  
    } 

Suppose we want to use the ContentResult action result because it is special. It returns an action result as simple plain text. Have a look:

    using System.Web.Mvc;  
    namespace DemoMvc.Controllers  
    {  
        public class SampleController : Controller  
        {  
            // GET: Sample  
            public ActionResult Index()  
            {  
                return View();  
            }  
            public ActionResult Welcome()  
            {  
                return Content("Hello and Welcome to MVC");  
            }  
        }  
    } 


Adding View
You can add a view for every controller in a very easy way. Have a look at the following procedure.

Step 1: Just right-click on the controller and select Add View

Step 2: Just click on Add in the next wizard

 

Step 3: When you run the Welcome View, you can see the following screenshot

You can check out in the browser URL that the Welcome controller action method is called of the SampleController. That's it.

Summary
This article provided an overview of the controller, controller actions and action results of ASP.NET MVC. In here you learned the overview of controllers, next we'll learn the custom routes in controllers. Thanks for reading



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