Category Archives: Bootstrap

Bootstrap

[RESOLVED]Drop Down, formating of bootstrap not working with error

I have this drop down and when I apply the bootstrap it is not working. I need help. if I need to create some css and where to place it.

    <p>

        <div class="form-inline">
            Find by Last Name or First Name: @Html.TextBox("SearchString", ViewBag.CurrentFilter as String, new { style = "width:200px", @class = "form-control" })

            Location:

            @Html.DropDownList("LocationList", "All", new { style = "width:200px", @class = "form-control" })


            <input type="submit" value="Search" class="btn btn-default" />
        </div>
    </p>

And I get this error….

CS1928: ‘System.Web.Mvc.HtmlHelper<PagedList.IPagedList<TweddlePhoneListApplication.Models.MasterList>>’ does not contain a definition for ‘DropDownList’ and the best extension method overload ‘System.Web.Mvc.Html.SelectExtensions.DropDownList(System.Web.Mvc.HtmlHelper,
string, System.Collections.Generic.IEnumerable<System.Web.Mvc.SelectListItem>, object)’ has some invalid arguments

         

try

@Html.DropDownListFor

in regards to other CSS, create a separate style sheet and write your own CSS in that.

Hi yguyon,

Thanks for your post.

According to your description,

yguyon

CS1928: ‘System.Web.Mvc.HtmlHelper<PagedList.IPagedList<TweddlePhoneListApplication.Models.MasterList>>’ does not contain a definition for ‘DropDownList’ and the best extension method overload ‘System.Web.Mvc.Html.SelectExtensions.DropDownList(System.Web.Mvc.HtmlHelper,
string, System.Collections.Generic.IEnumerable<System.Web.Mvc.SelectListItem>, object)’ has some invalid arguments

To add html attributes, You needed to do something like this:

@Html.DropDownList("LocationList", new List<SelectListItem>{
    new SelectListItem{ Text="value1",Value="1",Selected=true},
    new SelectListItem{Text=" value2",Value="2"},
   new SelectListItem{Text="value3",Value="3"}
}, "All", new { style="width:200px",@class="form-control"})
or

@Html.DropDownList("LocationList", (IEnumerable<SelectListItem>)ViewBag.LocationList, new { style="width:200px",@class="form-control" })


UPDATE:

A better way of doing this would be to use DropDownListFor

@Html.DropDownListFor(x => x.LocationListId, (IEnumerable<SelectListItem>)ViewBag.LocationListId, new {style="width:200px",@class="form-control" })

Hope this can be helpful.

Best Regards,

Eileen

<div class="controls">
 @Html.DropDownListFor(m => m.FTCustomerDetail.SelectedOrganization, new SelectList(Model.FTCustomerDetail.Oreganization.Organization, "Key", "Value", Model.FTCustomerDetail.SelectedOrganization), "---Select an Organization---", new { @name = "select2", @class = "select span6 textBoxh", @id = "orgSelection" })
                                           
                                        </div>

use this one

[RESOLVED]How to set Pagination number as 1, 2, 3 …. from my controller ?

Hi

i try to make Pagination to get pages as 1, 2, 3, …. as Bootstarp:

<ul class="pagination">
  <li class="disabled"><a href="#">&laquo;</a></li>
  <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
  ...
</ul>

but here i don’t know how to pass pages numbers to ( from 1 to end of pages depending on data found ? )

i can do it on;y with Next and Prv button as:

<ul class="pager">
    <li class="previous"><a href="/VisitDatas/Index?Page=@ViewBag.Prv">&larr; Prv</a></li>
    <li class="next"><a href="/VisitDatas/Index?Page=@ViewBag.Nex">Next &rarr;</a></li>
</ul>

and it work fine but i need to make it with Page Number Like (1, 2, 3, …)

C# Code:

        public ActionResult Index(int Page = 0)
        {
            ViewBag.Doctor_ID = new SelectList(db.Doctors, "Doctor_ID", "Doctor_Name");

            var visitDatas = db.VisitDatas.Include(v => v.ClinicCodes).Include(v => v.Doctors).Include(v => v.Kashfs);
            var model = visitDatas.Where(IsDone => IsDone.IsDone == false).ToList().Take(100).OrderByDescending(Visit_Date => Visit_Date.Visit_Date).ThenBy(VisitTime => VisitTime.VisitTime).Skip(25 * Page).Take(25);

            ViewBag.Prv = (Page - 1) < 0 ? 0 : Page - 1;
            ViewBag.Nex = Page + 1;
            return View(model);
        }

so i hope that any one can help me and tell me how can i do it with page number ?

Hi,

For that format, you could base on the current page number to format the pagination number. You may use some plugin to achieve that.

I suggest that you could refer to this link below achieve paging:

# Sorting, Filtering, and Paging with the Entity Framework in an ASP.NET MVC Application

http://www.asp.net/mvc/tutorials/getting-started-with-ef-using-mvc/sorting-filtering-and-paging-with-the-entity-framework-in-an-asp-net-mvc-application

Best Regards

Starain

[RESOLVED]DataAnnotations for validating Either Or group of text boxes

I have a class with a no. of different properties, out of them 3 are int? Prop1, int? Prop2, int? Prop3, which are textbox fields.

UI is like:

Enter value:                       Textbox1        Textbox2      Or     Textbox3

Now validation for these 3 is either Prop1 & Prop2 should be entered or Prop3.

I am using Data Annotations for validation. So my code for validation is:

public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
{
	var memberNames = new List<string>();

	// Other properties validations
	
	if (!this.Prop1.HasValue && !this.Prop2.HasValue && !this.Prop3.HasValue)
            {
                memberNames.Add("Prop1");
                yield return new ValidationResult("This field is required", memberNames);
            }

	if (this.Prop1.HasValue && this.Prop2.HasValue && this.Prop3.HasValue)
            {
                memberNames.Add("Prop1");
                yield return new ValidationResult("This field is required", memberNames);
            }

}

The code is failing when i enter value as decimal eg. 15.5 in Prop3 textbox.

Two validation messages come up is such case:

1. This field is required.

2. The value "15.5" is not valid for "Prop1" for Prop3.

Any alternative way of doing it…Any help would be appreciated..

DreamBig

Data Annotations for validation. So my code for validation is:

public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)

This is not DataAnnotation, is IValidatableObject.

DreamBig

is failing when i enter value as decimal eg. 15.5 in Prop3 textbox.

In what Culture do you support that?  en-US? fr-FR ?

yes ur right..IValidatableObject. Culture is en-US.

But i guess since the property is an int so entering 15.5 shows that message. and at that time this.Prop3.HasValue is null.

i made a custom validation method a long time ago. it might be handy for you

        public static Dictionary<string, object> Validate(ModelStateDictionary ms)
        {
            Dictionary<string, object> dict = new Dictionary<string, object>();
            string errors = "";

            var errorList = ms.Select(x => x.Value.Errors.Select(e => e.ErrorMessage).ToArray());
            var errorFields = ms.Where(x => x.Value.Errors.Count > 0).Select(x => x.Key).ToArray();

            foreach (var item in errorList)
            {
                for (int i = 0; i < item.Length; i++)
                {
                    if (errors == "")
                    {
                        errors += @"<div class='alert alert-danger'>
                                        <button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>";
                    }
                    errors += "<p>" + item[i] + "</p>";
                }
            }
            errors += "</div>";

            dict.Add("ErrorMessage", errors);
            dict.Add("ErrorFields", errorFields);

            return dict;
        }

i used this with ajax posts. anyway it’s old but it already had the bootstrap markup 

Sorry not what I am looking for. Not sure what to mark as answer. Hope any of the ASP.NET Team may help.

[RESOLVED]Load resources from actions of a controller

Can I load css not like a file foo.com/file.css ? I want to use path like "foo.com/home/index/".

I suppose that you could point to a particular file and then load it when your View is rendered using something like the ViewBag (or Model) :

public ActionResult Test()
{
            // Find the appropriate absolute URL for your CSS file
            var url = Url.Content("~/Content/Site.css");
            // Or fully qualify one from an external, publicly accessible site (Bootstrap example)
            //var url = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css";

            // Build your URL and store it in the ViewBag
            ViewBag.CSS = String.Format(@"<link href='{0}' rel='stylesheet' type='text/css' />", HttpUtility.HtmlEncode(url));
            return View();
}

And then add the following within the <head> section of your View to render it :

<head>
    <meta name="viewport" content="width=device-width" />
    @Html.Raw(ViewBag.CSS)
</head>

which would render the tag within your View :

<head>
    <meta name="viewport" content="width=device-width">
    <link href="/Content/Site.css" rel="stylesheet" type="text/css">
</head>

Can I load css like a stream?

[RESOLVED]Help bundles on MVC5

i just start use mvc5. And i want dont use bootstrap default. But it have error when i change content bootstrap. I have try bind in BundleConfig.cs but it fail and appear error:

error image

There is my bundles

bundles.Add(new StyleBundle("~/Content/css").Include(
                   "~/Content/site.css"
                  ));
        bundles.Add(new StyleBundle("~/Content/dist/Edit/css").Include(
            "~/Content/dist/Edit/bootstrap.css"
            ));

Thanks for read.

In the Image, you have passed two url of contents into the @Scripts.Render.

Once you have included more than one contents into a bundle means that is bound to thatbundle. So you use only the bundle name, not each content that you have included.

Thanks.

Thanks. 

I have find  error in 

BundleTable.EnableOptimizations = true;

Change value to FALSE, it wil work.

Thanks.

[RESOLVED]How do i implement UI Design in MVC For My Application?

HI ,

         We usually Creates the master Page .In that we can design our desired Web Templates.That is too easy .But how can be do that in mvc .

I want rich design style for application .How can this possible.? Can any one guide with cleared example Coding …

Thanks in advance ,

Karthik k 

 

The (Razor view engine) MVC equivalent to a master page is a Layout page. You will find one in the default template called _Layout.cshtml in the Views/Shared folder. The default template uses Bootstrap. You can search for free bootstrap themes and replace
the existing Bootstrap CSS file with a theme for easy design.

Here’s some free bootstrap template sites to get you started:

You can use bootstrap for any application. Bootstrap is a powerful , responsive  and easy to use one. Just download Bootstrap from http://getbootstrap.com/  .. For guidance regarding how to use bootstrap you can refer
bootstrap site http://getbootstrap.com/css , http://getbootstrap.com/javascript  etc.. The main advantage of bootstrap is that its mobile supported. 

Designed for everyone, everywhere.

Bootstrap makes front-end web development faster and easier. It’s made for folks of all skill levels, devices of all shapes, and projects of all sizes.

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Hello Mikesdotnetting

    Thanks for your reference for bootstrap themes sites.. Its aweful .. 

@ Mikes ,

      Thanking You for  Your Post .All Templates Gorgeous indeed .

-    Karthik .K

 

Export an HTML table inside Razor view, as csv file

I am working on an asp.net mvc web application, and inside a razor view i will generate an HTML table, the markup is as following:-

<table class="table table-striped table-bordered bootstrap-datatable datatable">
    <tr>
        <th></th>
        <th>
            Name
        </th>
        <th class="hidden-phone hidden-tablet">
             Description
        </th>
        <th>
            User Groups
        </th>
        <th>
            Security Roles
        </th>
        <th class="hidden-phone hidden-tablet">

        </th>
    </tr>

    <tr id = "15">
        <td>
            <a href="/SecurityGroup/Edit/15">Edit</a> 
  </td>
        <td>
			<a href="/SecurityGroup/Details/15">All T Users</a>
        </td>
        <td class="hidden-phone hidden-tablet">
			this group contains all T Group users.
        </td>
        <td>
            The are <a href="/SecurityGroup/Details/15">85</a> Users.
			
        </td>
        <td>
            
           <ul>
  <li class=" icon-arrow-right"></li><a href="/SecurityRole/Details/13">Read</a>
  </ul>
        </td>
        <td class="center hidden-phone hidden-tablet">
            
          
           
            <a class="btn btn-success" href="/SecurityGroup/Details/15">
    <i class="icon-zoom-in icon-white"></i>
    Details
    </a>

        </td>
    </tr>
    <tr id = "16">
        <td>
            <a href="/SecurityGroup/Edit/16">Edit</a> 
  </td>
        <td>
			<a href="/SecurityGroup/Details/16">Services Team</a>
        </td>
        <td class="hidden-phone hidden-tablet">
			this group contains all the Core services users.
        </td>
        <td>
            The are <a href="/SecurityGroup/Details/16">10</a> Users.
			
        </td>
        <td>
            
           <ul>
  <li class=" icon-arrow-right"></li><a href="/SecurityRole/Details/17"> Services</a>
  </ul>
        </td>
        <td class="center hidden-phone hidden-tablet">
            
          
           
            <a class="btn btn-success" href="/SecurityGroup/Details/16">
    <i class="icon-zoom-in icon-white"></i>
    Details
    </a>

        </td>
    </tr>
    

</table>

now i manually select the HTML table by moving the mouse over the HTML table rows inside the browser ,, and i copy the content, then i paste it inside Excel sheet, then the HTML table will be pasted successfully inside the excel sheet,.

so my question if how i can add a link inside my razor view, which will select the html table and show it inside Excel sheet (by creating a .csv file), seems that it is not a complected tasks, as Excel sheets will automatically understand html table when
using copy/paste.

can anyone advice on this please?

a-rad

This may be of interest to you: http://forums.asp.net/t/1961968.aspx?webgrid+export+to+CSV

and: http://www.mikesdotnetting.com/article/204/exporting-the-razor-webgrid-to-excel

but the links are talking about using WebGrid to export csv files, while in my case i use an HTML table not a webgrid .. so can you advice ?

also it mentioned to use the following inside the view:-

@{
    Layout = null;
    var db = Database.Open("Northwind");
    var sql = "SELECT CustomerID, CompanyName, ContactName, Address, City, Country, Phone FROM Customers";
    var data = db.Query(sql);
    var columns = data.First().Columns;
    Response.AddHeader("Content-disposition", "attachment; filename=report.xls");
    Response.ContentType = "application/octet-stream";
}

but i do not wwrite sql statments directly inside a view ,, and i am using EF where i pass model objects to the view,, nit sure who this code works..

Hi john,

Thanks for your post.

johnjohn123123

but the links are talking about using WebGrid to export csv files, while in my case i use an HTML table not a webgrid .. so can you advice ?

Do you want to export the html table to excel?

So I did a simple sample,you can refer to the following code snippet according to your own requirement to modify this and use it:

action:

public ActionResult mydemo1()
        {
            Response.AddHeader("Content-type", "application/vnd.ms-excel");
            return View();
        }

view:

@{
    ViewBag.Title = "mydemo1";
    Layout = "";
}

<h2>mydemo1</h2>
<style type="text/css">
    body {
        font-family:Tahoma;
    }
    h2 {
        color:red
    }
    table {
        border:1px solid black; border-spacing:0
    }
    td {
        color:green;font-size:.8em;padding:5px
    }
    .heading {
        background:#ccc
    }

</style>
<table>
    <tr class="heading">
        <th>
            Name
        </th>
        <th>
            Age
        </th>

    </tr>
    <tr>
        <td>
            Test1
        </td>
        <td>
            15
        </td>
    </tr>
    <tr>
        <td>
            Test2
        </td>
        <td>
            16
        </td>
    </tr>
</table>

Hope this can be helpful.

Best Regards,

Eileen

i find an approach which i was looking for in this link

http://jsfiddle.net/terryyounghk/KPEGU/

but i am not sure if there are any concerns in using such an approach inside asp.net MVC Razor views ?

can anyone advice please ?

johnjohn123123

but i am not sure if there are any concerns in using such an approach inside asp.net MVC Razor views ?

You can use JQuery to export the table into CSV.

In your HTML table you typically format certain columns such as currency, numbers, dates. When you export to csv using jquery these will be exported as strings and not as numbers. Sometimes this may pose problems to your users. Also in some scenarios your
users may need more or less columns in csv then what is shown in the Html table.

pprasannak

You can use JQuery to export the table into CSV

You mean same as the approach mentioned in this link
http://jsfiddle.net/terryyounghk/KPEGU/
or you are talking about different approaches ? .

pprasannak

When you export to csv using jquery these will be exported as strings and not as numbers. Sometimes this may pose problems to your users.

in my case i do not have currency or specially formatted strings.

pprasannak

Also in some scenarios your users may need more or less columns in csv then what is shown in the Html table.

but if i am not wrong this requires a lot of work, to select which columns to export , baring in mind that i have around 50 views that i need to add export capabilities to it. while exporting all the fields might not be the best solution , but end users
can manually delete unwanted columns from the Excel sheet editor…

Can you advice on this please ?