Category Archives: CSS

CSS

[RESOLVED]Caching not working when deployed in IIS8

We developing Web Application using MVC4 and Jquery Mobile. Our requirement is to cache all images , jquery , css. So i triew below code which works like charm.

<staticContent>
        <clientCache cacheControlMaxAge ="2.00:00:00" cacheControlMode="UseMaxAge" />
    </staticContent>

In my visual studio its work great. I can able to capture all images,script.

But when i deployed in IIS8 cache not working. I tried lot but no luck. Please guide me. Why cache is not work when deployed in IIS.

The application pool is in integrated pipeline mode correct and not classic? This won’t work if it’s in classic mode, integrated only.

[RESOLVED]Problem with CheckBoxListFor in MVC

Hello Everyone, I am trying to use checkboxlistfor in mvc to generate checkboxes dynamically for my items.Below is the my View code for checkboxlistfor:

<table class="form-table">
<tr>
<td>
<label>Searchfor</label>
</td>
<td>
@Html.CheckBoxListFor(model => model.PostedSearchableObject.PostedIds,
model => model.AvailableObjectTypes,
objecttype => objecttype.Id,
objecttype => objecttype.Name,
model => model.SelectedObjectTypes,
Position.Horizontal) </td>

When I run the solution I can see all the items that I need to have a checkbox for (ex: item1, item2, item3), but the problem is there are no Check-boxes next to each item for the user to select them. they are just a simple labels without a check box.

Does anyone has any idea why I can’t see the check-boxes?

thanks. 

Hi Benjaminsh,

Thanks for your post.

Benjaminsh

but the problem is there are no Check-boxes next to each item for the user to select them. they are just a simple labels without a check box.

According to your requirement,I did a sample.please refer to the following sample:

controller:

 [HttpGet]
        public ActionResult demo1()
        {
            WebCSDBEntities db = new WebCSDBEntities();
            return View(db.tblCities);
        }
        [HttpPost]
        public string demo1(IEnumerable<tblCity> cities)
        {
            if (cities.Count(x => x.IsSelected_) == 0)
            {
                return "you have not selected any city";
            }
            else
            {
                StringBuilder sb = new StringBuilder();
                sb.Append("You selected-");
                foreach (tblCity city in cities)
                {
                    if (city.IsSelected_)
                    {
                        sb.Append(city.Name_ + ",");
                    }
                }
                sb.Remove(sb.ToString().LastIndexOf(","),1);
                return sb.ToString();
            }
        }

view:

@model reflectDemo.Models.tblCity

@{
    ViewBag.Title = "tblCity";
}

@*<h2>tblCity</h2>*@
@Html.HiddenFor(x=>x.Id)
@Html.HiddenFor(x=>x.Name_)
@Html.CheckBoxFor(x=>x.IsSelected_)
@Html.DisplayFor(x=>x.Name_)
@model IEnumerable<reflectDemo.Models.tblCity>

@{
    ViewBag.Title = "demo1";
}



<div style="font-family:Arial">
    <h2>demo1</h2>
    @using (Html.BeginForm())
    {
        @Html.EditorForModel()
        <br />
        <input type="submit" value="submit" /> 
    }
    
</div>

It worked on my side.

More information,you can check this:

#ASP.Net MVC- How to implement CheckBoxList

http://besttechnologyblog.com/2014/05/04/asp-net-mvc-how-to-implement-checkboxlist/

Hope this can be helpful.

Best Regards,

Eileen

Thank you very much for the time you spend to reply this thread. I found out the problem was due to overriding a CSS class.

[RESOLVED]Not rendering in <>div> after saving from dialog box

Hi,

I am having a main view as follows

@{
    Layout = null;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery-2.1.1.js"></script>
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="~/css/Admin.css" rel="stylesheet" />

<script type="text/javascript">  
    $(document).ready(function () {
      
        $('#btnbranch').click(function () {
            
            $("#RenderHere").load("@Url.Action("Branch","Branch")",
                                      function (response, status, xhr) {
                                          if (status == "error") {
                                              alert("An error occurred while loading the results.");
                                          }
                                      });
        });
        
    });
    </script>
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ADMIN PAGE</title>
</head>
<body style="background-color:#bfd0e4;">
     <table style="width:100%;height:100%;" id="tbl">
          <tr style="vertical-align:top;">
               <td style="width:60%">
                       <div id="RenderHere">
                         
                    </div>
                  </td>
               <td class="middletd">
                    <img src="./Images/blue_overlay.jpg">
                </td>
                <td style="width:60%">
                    <div>  
                        <table style="height:60%">
                            <tr>
                                <button id="btnbranch">BRANCH</button>
                                </br>

                                <button id="apointments"> SOURCE</button>
                            
                            </tr>
                        </table>             
                    </div>
                 <div class="holidayinn"><img src="./Images/holiday_club_logo.png"></div> 
            </td>
        </tr>
    </table>
</body>
</html>

I have 2 panels( left and right ) inside this view and each partial view is loading i the div "RenderHere" whenevr i click the corrresponding buttons in the rhs.

Supppose i have a button"Branch" and it lists all the branch records from db. this contains a link "Edit" and it opens a dialog box to edit the details.The editing is done properly but after saving again the partial view is loading as the whole page  not
in the RHS part of the main page.

My controller function is as follows and i am rendering partial views each time throught his ActionResult.

  public ActionResult Branch()
        {
            model= new TrackerModel();
             // List<BranchModel> filterdBranchData = null; 
              try
              {
                  model.branchData = this.ppiService.GetBranchData();
                 // filterdBranchData = model.branchData.Where(item => item.IsDisabled.Equals(false)).ToList();
               
              }
              catch (Exception ex)
              {
                  logger.Error("error occured", ex);
              }
              return View(model.branchData);
        }

But after saving the edited record, its  showing as the full page not in right hand side panel of the main page.

Pls  help me

Vidya

You need to use Ajax call for this to load a part of the page

can u please give me an example

First, How r u calling action Branch()?.

What are doing in button clicks?

Hi Vidya,

For this issue, I suggest that you could use AJAX form directly to avoid refresh the whole page.

# Html.BeginForm() vs Ajax.BeginForm()

http://www.codeproject.com/Articles/429164/Html-BeginForm-vs-Ajax-BeginForm-in-MVC

You also could use jQuery AJAX to achieve that.

# jQuery.ajax()

http://api.jquery.com/jquery.ajax/

Best Regards

Starain

[RESOLVED]Ajax helper BeginForm method generates "invisible" form?

I try to write a page to reset uers’s password, user fill an email address and it’s sent to server for validation. If pass, user can get a password reset link sent to the safe email address.

The page look like below. The problem is that: the ajax helper always generates form that’s invisible, style: display:none

Please help me review below code.. 

@model String
@{
    ViewBag.Title = "ForgetPassword";
    Layout = "~/Views/Shared/_Layout.cshtml";
    if(IsPost)
    {
        ViewBag.Message = "The password reset url has been sent to your email, please check the email and reset in 30 minutes.";
    }
}

<h2>ForgetPassword</h2>
<p>Get password reset link by the email:</p>
<div id="form_area">
    
</div>

@using (@Ajax.BeginForm(new AjaxOptions{HttpMethod="Post"}))
{
    <input type="text" value="safe_email"/>   <div id="validate_result"></div> 
    @Ajax.ActionLink(
        "Validate", 
        "ValidateEmail", 
        Model, 
        new AjaxOptions{HttpMethod="Post", InsertionMode=InsertionMode.Replace, UpdateTargetId="validate_result"}
        )
    <br />
    <input type="submit" value="Send Email" />
}


Hi,

If the functionality is working per your desired requirement, you  don’t need to be worry.

Since Ajax works without <form>, it tries to capture form submit event and tries to Post via Ajax to the ActionMethod.

Note that <form> is not rend able, its just a container tag, in this case usage of
display:none or not, is not a concern.

Hi, the code doesn’t work, when I say form is invisible, input element and button doesn’t show up neither. thanks.

raju dasa

Hi,

If the functionality is working per your desired requirement, you  don’t need to be worry.

Since Ajax works without <form>, it tries to capture form submit event and tries to Post via Ajax to the ActionMethod.

Note that <form> is not rend able, its just a container tag, in this case usage of
display:none or not, is not a concern.

The ajax framework is unobtrusive which means it works without javascript enabled.  The helper will indeed build a normal form that will still work, it then attaches javascript to the submit event of the form to take over and do an ajax call if js is enabled. 
If it isn’t the form works as normal.

As for the OP’s question, are you seeing the display:none in the *source*, ie when you View->Source from the browser, *not* when you look via the dev tools?  If it is not in the source, but in the dev tools view of the source, then you have some js or css
somewhere hiding the form.

Hi,

Forrest Guo

Hi, the code doesn’t work, when I say form is invisible, input element and button doesn’t show up neither. thanks.

I forgot to imagine that all controls in it will get hidden.Tongue Out

Can u post the jquery/javascript code in _layout page? might be some code from clientside is hiding the form.

Thank Aidy, raju.  you understand me right. I checked the _layout.cshtml shared view, the problem was caused by a line of  hard-code javascript code, forms with id=form0 are hidden. Unfortunately all forms geneated by the ajax helper have same id "form0".
It’s better to differentiate by default.

[RESOLVED]how to do change the label when dropdownlist selected item index change in mvc4

Hi ,

I have a drop down list. I wanted to change the Label of the text box ( which is on the partial page) based on the value changed in the drop down. Here is my drop down list code.

   <div class="span4">
                            <div class="control-group">
                                <label class="control-label">Media Type: *</label>
                                <div class="controls">
                                    @Html.DropDownListFor(f => f.Invoice.Type, new[] {
                                   new SelectListItem
                                   { Text = "Radio", Value ="Radio" },new SelectListItem
                                   { Text = "Cable", Value ="Cable" },new SelectListItem
                                   { Text = "Print", Value ="Print" }
                                   }, String.Empty, new { @class = "input-xlarge" })
                             

                                </div>
                            </div>
                        </div>

Here is my label html code

  <div class="control-group">
                        <label class="control-label">Radio Station:</label>
                        <div class="controls">
                            @Html.TextBoxFor(f => f.Credit, @class = "input-xlarge focused" })
                        </div>
                    </div>

Here if i change the drop down list to cable, then i want the above label to be changed as " Cable Station"

and if i change the drop down list to print, then i want the above label to be changed as "Print Station"

Can you guys help me how to implement this.  This is very simple in regular ASP.net. MVC is new to me. appreciate your help.

Thanks.!

Hi vkasp,

Add id to the label like

<label class="control-label" id="LabelId">Radio Station:</label>

In Jquery, when the dropdown is changed, just set the value of the label, using this id as mentioned below:

$("#ddlStation").change(function () {
         var stationName= $("#ddlStation option:selected").text();
        if (!(stationName== "")) {
            return;
        }
        else {
            $("#LabelId").text(stationName+ " Station");
        }
});

Give dropdown id as well as ddlStation

Hi,

I added the jquery and label id. still the label text is not changing.? am i doing anything wrong? please advise.  

below is the id i added to the drop down. Thanks

        @Html.DropDownListFor(f => f.Invoice.Type, new[] {
                                   new SelectListItem
                                   { Text = "Radio", Value ="Radio" },new SelectListItem
                                   { Text = "Cable", Value ="Cable" },new SelectListItem
                                   { Text = "Print", Value ="Print" }
                                   }, String.Empty, new {id="ddlStation", @class = "input-xlarge" })

You can use the below Jquery code to assign text to label based on the value selected in dropdownlist

<!-- JS includes -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
              $(function() {
			<!-- Attach change event to dropdownlist -->
               $('.input-xlarge').change(function() {
			<!-- JS includes -->
                  var selectedval = $(this).val();
			<!-- Get the label control -->
				$('.control-label').text(selectedval + " Station");
		    });
           });
</script>

I have used the Jquery css classs selector , if you want to use id you need to change it accordingly

View Code

@using (Html.BeginForm())
				{
					
				 <div class="span4">
                            <div class="control-group">
                                <label class="control-label">Media Type: *</label>
                                <div class="controls">
                                    @Html.DropDownListFor(f => f.Invoice.Type, new[] {
                                   new SelectListItem
                                   { Text = "Radio", Value ="Radio" },new SelectListItem
                                   { Text = "Cable", Value ="Cable" },new SelectListItem
                                   { Text = "Print", Value ="Print" }
                                   }, String.Empty, new { @class = "input-xlarge" })
                             

                                </div>
                            </div>
                        </div>
				<div class="control-group">
                        <label class="control-label" value="Radio Station:"></label>
			<div class="controls">
                            @Html.TextBoxFor(f => f.Credit, @class = "input-xlarge focused" })
                        </div>
                    </div>
				}

Did you add Id to label as well, and used the same in jQuery code?

Please, Share complete code to help you much better.

[RESOLVED]How to get Date Only without Time in my textbox from Controller ?

Hi

i try here to get values from my Controller i got every thing Ok But i have date filed don’t get it as i need – i set format to be "2014-11-28" but i got it as "00:00:00 11/28/2014"

i don’t know where is Err ?

Model Code:

        [DataType(DataType.Date)]
        [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]
        [Required(ErrorMessage = "You Must Enter Date")]
        public DateTime Visit_Date { get; set; }

Controller Code:

        [HttpPost]
        public ActionResult IsOut(int Doctor_ID, DateTime Visit_Date)
        {
            var message = string.Empty;
            var result = new IdentityResult();

            var IsOut = db.Doctor_Out.Where(d => Visit_Date >= d.Frm_Date && Visit_Date <= d.To_Date);

            if (IsOut.Count() != 0)
            {
                message = "Doctor Is Not Here";
                result = new IdentityResult(message);
                AddErrors(result);

                return View("_Err", IsOut);
            }
            else
            {
                VisitDatas VS = new VisitDatas();
                VS.Doctor_ID = Doctor_ID;
                VS.Visit_Date = Visit_Date; // Here is Date value i need it as "2014-11-28"
                ViewBag.Clinic_Code_ID = new SelectList(db.ClinicCodes, "Clinic_Code_ID", "Clinic_Code_Name");
                ViewBag.Doctor_ID = new SelectList(db.Doctors, "Doctor_ID", "Doctor_Name");
                ViewBag.Kashf_ID = new SelectList(db.Kashfs.OrderBy(m => m.Kashf_Name), "Kashf_ID", "Kashf_Name");
                return RedirectToAction("Create", VS);
            }
        }

View Code:

            <tr>
                <td style="width: 120px; text-align: left; font-size: medium; font-weight: bold; vertical-align:middle">Date:</td>
                <td>
                    @Html.TextBoxFor(model => model.Visit_Date, "{0:yyyy-MM-dd}", new { @class = "form-control", style = "width: 150px; font-size: medium; font-weight: bold; text-align: center" })
                    @Html.ValidationMessageFor(model => model.Visit_Date, "", new { @class = "text-danger" })
                </td>
            </tr>

@section scripts{
    <script src="~/Scripts/jquery-2.1.1.min.js"></script>
    <script src="~/Scripts/jquery-ui.min-1.11.1.js"></script>
    <link href="~/Content/themes/base/all.css" rel="stylesheet" />
    <script>
        $(function () {
            $("#Visit_Date").datepicker({ dateFormat: "yy-mm-dd" });
        });
    </script>
}

So how can i get date in my view as "2014-11-28" without Time ?

// change
VS.Visit_Date = Visit_Date; // Here is Date value i need it as "2014-11-28"
// to
VS.Visit_Date = Visit_Date.ToString("yyyy-MM-dd");

This assumes VS.Visit_Date is a string.  If Visit_Date is also DateTime then your existing code should be used and you should convert to the right format using ToString when the date is shown.

DateTime objects can be easily formatted using either the String.Format() or DateTime.ToString() method by passing in a
formatting string like the ones defined here. If your Visit_Date object is a DateTime object and you want to format it using the "{year}-{month}-{date}" format, you would just use
the appropriate "yyyy-MM-dd" string as seen below :

// This assumes that Visit_Date is a DateTime object and that VS.Visit_Date is a string
VS.Visit_Date = Visit_Date.ToString("yyyy-MM-dd");

If VS.Visit_Date is in fact already a DateTime object, then your current code should be fine. You would just need to format it prior to it being output such as within your View :

<!-- Example -->
@Model.Visit_Date.ToString("yyyy-MM-dd")

[RESOLVED]Form Submit: Allowed before page finishes loading?

Greetings,

We have some larger data entry screens, with Save/Cancel buttons at the top, and the bottom of the page. If the page is loading, and say takes 2-3 seconds, you can see the screen load while the ‘page loading’ wheel is spinning in the browser.

Every so often, the user just needs to change a piece of information at the top of the page, and hit ‘Save’, but does so before the page is finished loading (big page, slow connection, whatever), and page/form will submit with only say 50%-70% of the expected
variables in the FormCollection that is passed into the HttpPost even/submit routine in the controller. From here the page usually crashes etc.

What is the most appropriate or accepted way to handle this? Sure, we could only have the Save/Cancel buttons at the end of the screen, so those buttons are the last to show up, therefore the page has loaded completely – but is there a way to otherwise ensure
the page has loaded completely before accepting a submit / post back? jQuery or something with a ‘Page Loading’ spinner before the page can be used? 

Looking for ideas and/or best practices.

 

You can use Ajax.BeginForm and handle OnBegin and OnSuccess events to show dynamically display the loading spinner images.

Reference:

http://www.codeproject.com/Articles/41749/Displaying-JQuery-Progress-using-ASP-NET-MVC-with

The article below uses AjaxOptions LoadingElementId property:

http://stackoverflow.com/questions/17688552/show-loader-on-ajax-beginform-submit

http://stackoverflow.com/questions/6466612/mvc3-ajax-loading-icon

Hope this helps.

Another option is to use CSS to position the buttons, but put the HTML for the buttons as the last line of your page code.  That way all the other HTML would have loaded before the buttons are even there for the client’s browser to render.

The users can still enter return to post even if submit buttons hidden. You should place the form in a div, and mark it as display:none. On Dom ready event or just after the the end form, , change the display to block. You could also include a loading div before
the form div, and hide it when the form is ready.
@using (Ajax.BeginForm("OwnFundTransferLoadConfirm", "FundTransfer",
    new AjaxOptions
    {
        UpdateTargetId = "function_page",
        InsertionMode = InsertionMode.Replace,
        LoadingElementId = "ulProgress",
        HttpMethod = "POST",
        OnSuccess=""
    }, new { @class = "form-horizontal row-fluid well", id = "frmOAFT" }))
{


}

use ajax submit and onsuccess function ….

This will not work. The ajax code is attached at Dom ready event, so until this time a standard form submit will be performed, if the user clicks a submit button or hit enter.

[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]Type in different language in text input

Hi,

I have requirement of creating web page which will be used to type in different language in input fileds for E.x. Hindi, Tamil , Can I achieve this by using CSS @font-face ? if not is there any other option, this page also to be exposed via mobile devices
too.

Thank you

I think below link will help you

http://www.c-sharpcorner.com/uploadfile/krishnasarala/multi-language-web-site-in-Asp-Net/