How can I put the Orchard CMS Admin controls inline - css

I'm developing a site for a client using Orchard CMS and a custom made module. In the Admin section, I've added two radiobuttons, but can't seem to style them properly.
This is my code:
#Html.RadioButtonFor(m => m.UserImportLinkMode, UserImportLinkMode.New, new {id="newGroup", name="group"})
<label for="newGroup">#T("New")</label>
#Html.TextBoxFor(m => m.NewGroupName, new {})<br/>
#Html.RadioButtonFor(m => m.UserImportLinkMode, UserImportLinkMode.Existing, new {id="existingGroup", name="group"})
<label for="existingGroup">#T("Existing")</label>
#Html.DropDownListFor(m => m.SelectedGroupId, new SelectList(Model.Groups, "Id", "Name"))
And this is what it looks like:
Obviously, not as nice. Everything is put beneath each other. I can fix this (I know CSS), but that would mean creating styles for those specific controls. I was wondering if the current Admin theme has built-in styles already to put everything inline.

You have to add forcheckbox class to the labels of radios and checkboxs or any element want to appear inline.
#Html.RadioButtonFor(m => m.UserImportLinkMode, UserImportLinkMode.New, new {id="newGroup", name="group"})
<label for="newGroup" class="forcheckbox">#T("New")</label>
#Html.TextBoxFor(m => m.NewGroupName, new {})<br/>
#Html.RadioButtonFor(m => m.UserImportLinkMode, UserImportLinkMode.Existing, new {id="existingGroup", name="group"})
<label for="existingGroup" class="forcheckbox">#T("Existing")</label>
#Html.DropDownListFor(m => m.SelectedGroupId, new SelectList(Model.Groups, "Id", "Name"))

Related

Regarding #Html.DropDownListFor(...)

Can someone please help me figure this out. I have a Drop Down List in ASP.NET Razor code
#Html.DropDownListFor(model => model.Height, heightlist, new { style = "font-size:120%;" })
My Drop Down List is too big when you click on the list. I would like it to be like the one on the right hand side:
I tried various methods, including the code below, but the issue exists:
#Html.DropDownListFor(model => model.Height, heightlist, new { height="50", style = "font-size:120%; height:30px;" })

When sign up Chrome saved phone number instead of e-mail

In my case. I have login form for sign up the form has some field like phone-number, e-mail address, password etc.. after sign up when the user want to login the requirement is e-mail address and password. Chrome automatically filled the fields password field is ok but in the e-mail field automatically phone number pasted.
How do i configure this ?
The shots shows chrome credential when i sign up the site.
Last one is true i want to saved like last one.
Form markup, that's the form phone and e-mail inputs code
#Html.TextBoxFor(m => m.Email, new { #class = "SSTinputTextE input", placeholder = "E-POSTA ADRESİ" })
#Html.ValidationMessageFor(m => m.Email, "", new { #class = "text-danger", #style = "display:none" })
#Html.TextBoxFor(m => m.Phone, new { #class = "SSTinputTextE input txtNumeric", placeholder = "CEP TELEFONU", maxlength = "11" })
#Html.ValidationMessageFor(m => m.Phone, "", new { #class = "text-danger ", #style = "display:none" })
I had the exact same problem in a .Net MVC site with very similar markup. I also use placeholder attributes on the input element itself, instead of label elements before the element—just like the op.
I fixed the problem by moving the phone number field before the email field in the HTML (and form visually, if that matters).
I didn't dig into it enough to figure out the exact reason for this definitively, but I suspect it was because it was picking up the first input field after anything with the word "email" in it. Since there wasn't a label for the phone number to interrupt this logic, the phone number field was next so it chose that. I know Chrome uses some simple regex for picking up these auto save fields, so maybe its just not clever enough to realize that placeholders on the element itself can count too? (Again, this is just a guess at the reason. But my workaround above worked anyway.)

ASP.NET MVC Hidden values modified by default

I'm currently working on a website in asp.net MVC. I have one view to edit my model but some item in this model can only be modified by admins.
So I removed some editorfor() for the basic users and everything works fine...
Until I saw that : if basic user edit the model, the fields which are hidden for them are modified to a default value not the previous one modified by an admin.
Did someone know how can I saved the previous values even they are not in an editorfor() ?
Code :
#Html.EditorFor(model => model.name)
#if (ViewBag.Role == "Admin")
{
#Html.EditorFor(model => model.age)
// If admin is connected, he can edit age => no problem
}
// if a user modify name but don't touch age because it's for admin only, the model age will get 0
Thanks in advance
#Html.HiddenFor(m = m.age)
Simple Answer for my stupid question, I have tried it on first but it didn't work but now it did so there is the solution. Thanks to Stephen Muecke.
#Html.EditorFor(model => model.name)
#if (ViewBag.Role == "Admin")
{
#Html.EditorFor(model => model.age)
// If admin is connected, he can edit age => no problem
}
If we take your example then age is only for admin. so when basic user will edit this page that time condition will not satisfied and #Html.EditorFor(model => model.age) will be not rendered for basic user. So when you post the form that time age's value will not be pass to controller because age is not rendered in form. so it will save default value which you set.
Solution is you have to use hidden field out side the if condition. so value will be keep as it is controller -> View -> controller.

Change password box to disabled

How can I change the password box to disabled.
#Html.Editor("password")
something like
Html.TextBoxFor(model => model.User, new {disabled = "disabled"})
You're close. You have to prefix your attributes with #:
Html.TextBoxFor(model => model.User, new { #disabled = "disabled" })
You can read only text box using Html Attributes
#Html.TextBoxFor(model => model.User, new { #readonly="readonly",
style = "width:80%;" })

Kendo UI Grid in MVC - How to return selected row Item to Controller

I have an MVC 4 application with a Kendo UI grid that I am using for user management. I display the users information in the grid and have a custom command button that when clicked opens a new page to edit the users information. For various reasons (one being there is too much information to be edited to display in the grid) I need to edit the users on a new page and not with inline or popup or incell editing. My grid looks like this... very simple
#(Html.Kendo().Grid<WebSiteNew.Models.ManageUsersViewModel>()
.Name("grid")
.HtmlAttributes(new { style = "margin-top: 5px" })
.Columns(c =>
{
c.Bound(model => model.UserName);
c.Bound(model => model.FirstName);
c.Bound(model => model.LastName);
c.Bound(model => model.Email);
c.Bound(model => model.Phone);
c.Bound(model => model.Extension);
c.Bound(model => model.JobTitle);
c.Command(com => { com.Custom("Edit").Click("edit"); com.Destroy(); });
})
.Pageable()
.Sortable()
.Selectable()
.DataSource(d => d
.Ajax()
.PageSize(20)
.Model(m => m.Id(i => i.UserName))
.Read(r => r.Action("ManageUsers_Read", "ManageUsers"))
.Destroy(o => o.Action("ManageUsers_Destroy", "ManageUsers"))
))
The issue I have here is that I need to pass the ID of the user that the edit button has been clicked on to the edit screen so that I can bring up the information for the selected user. The only way I know of to get this information is through javascript, something like this in my command button click function...
function edit() {
var grid = $("#grid").data("kendoGrid");
var row = grid.select();
var dataItem = grid.dataItem(row);
var id = dataItem.UserId;
location = "#Url.Action("EditUser")";
}
This gives me the id that I need but I have no way (that I know of) to pass this back to my controller. So my question is... how do I get this information back to the server side? Is there another way to get the information I need or is this just something that is not possible in Kendo UI MVC?
To make this a more general question.. when I look at the Kendo UI documentation and it tells me how to get a value in javascript... how, in general, does one go about using this value in an MVC application when it is needed on the server side? I can't seem to find an alternative "MVC" way to do this in their documentation.
You should form additional parameters to url string:
location = "#Url.Action("EditUser")" + "?id="+id;

Resources