Thursday, 30 April 2015

Bootstrap dropdown menu not working


Today Twitter Bootstrap has become a basic need of the Website Development . Today i am giving some explanation regarding a common mistake while using Twitter Bootstrap . This mistake will happen only when you are trying to create a Navigation Bar for your website / webapplication using Bootstrap NavBar .

So , In order to create a NavBar we must require 3 files -

1. Bootstrap.css file
2. Jquery.js file
3. Bootstrap.js file

So Bootstrap.css file is used for Design and look of Navbar and Now the most important thing due to this you may suffer from an error -

Bootstrap dropdown menu not working 

So , Ever you suffer from this a simple solution is you must first include the jquery.js file or any version of jquery.js file as you wish as shown in example below and then after jquery file you can include bootstrap.js file 

If it still does not work just include the following script code after including the above two js files

<script>
    $(document).ready(function () {
        $('.dropdown-toggle').dropdown();
    });
</script>

A Simple Example of Twitter Bootstrap Navbar is Below :-



<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
        $('.dropdown-toggle').dropdown();
    });
</script>




   
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>

       
         <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Manage Users <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
  <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>
        </li>
      </ul>
    <div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
     
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>


    </div>
    </form>
</body>
</html>

Tuesday, 28 April 2015

ASP.NET MVC Action Return View Not Changing URL

The return View(.......) in Action of Controller is the statement that we use to return the view View for a Particular Controller Request . But Return view will return the view exactly you want and render the view but it will not change or target the user to target url  . The simple solution is below -


Code For an Action -

[HttpPost]
public ActionResult Start(SomeViewModel someViewModel)
{
  ...
  return RedirectToAction("SomeOtherAction");

              
                             or


  return RedirectToAction("Action Name", "Controller Name");
}

So , In code above We are using RedirectToAction instead of using  return view this can be used in total of 6 variants .

I have give 2 of simple one . In Parameter to these actions you need to pass the controller and action name according to variant you choose