JQuery UI Tab with form in ASP.NET MVC 3 - asp.net-mvc

I try to make user registation form. I have two user types and want to make two JQuery UI tabs with forms. But tab is empty and in java script console error "GET http://localhost/ParcDocs/Admin/Users/AddWorker 500 (Internal Server Error)".
Code of user registration page:
<script type="text/javascript">
$(document).ready(function() {
$("#tabContainer").tabs();
});
</script>
<div id="tabContainer">
<ul>
<li>#Html.ActionLink("Пользователь", "AddUser", "Users", null, null)</li>
<li>#Html.ActionLink("Сотрудник", "AddWorker", "Users", null, null)</li>
</ul>
</div>
PartialView code:
#model ParcDocs.Models.WorkerUser
#using (Html.BeginForm("AddWorker", "Users"))
{
#Html.ValidationSummary(true)
<fieldset>
<legend>Пользователь</legend>
<div class="editor-label">
#Html.LabelFor(model => model.UserName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.UserName)
#Html.ValidationMessageFor(model => model.UserName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Password)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.UserName)
#Html.ValidationMessageFor(model => model.Password)
</div>
<div class="editor-field">
#Html.DropDownListFor(model => model.RoleId, ((IEnumerable<ParcDocs.Models.Role>)ViewBag.PossibleRoles).Select(option => new SelectListItem
{
Text = (option == null ? "None" : option.Name),
Value = option.Id.ToString(),
Selected = (Model != null) && (option.Id == Model.RoleId)
}), "Выберете роль пользователя")
</div>
<p>
<input type="submit" value="Добавить" />
</p>
</fieldset>
}
Controller code:
public ActionResult AddWorker()
{
var model = new WorkerUser();
return PartialView(model);
}
Same behavior this second tab.

You should be returning a PartialViewResult, rather than an ActionResult. Put a breakpoint on public ActionResult AddWorker() and see what exception you get. Paste it here so that we have more information.

Related

using viewmodel with create view

I have a ViewModel with two models in it which works find when displaying data. My problem is I want to add a foreach() within the Create.cshtml file. Any ideas?
----Create.cshml-----
#model demo.Models.ViewModel
#{ ViewBag.Title = "Create Reference";}<h2>Create</h2>
#using (Html.BeginForm()) {
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset>
<legend>Submission Form </legend>
<div class="editor-label">
#Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Title)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Title)
#Html.ValidationMessageFor(model => model.Title)
</div>
<div class="editor-field">
<!-- iterate through ExternalContentModel and make checkboxes. -->
#foreach (var item in Model.ExternalContentModel)
{
<label class="checkbox">
<input type="checkbox" name="users" value="#item.auth_lname"> #item.auth_lname
</label>
}
</div>
<div class="editor-label">
#Html.LabelFor(model => model.OrganizationName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.OrganizationName)
#Html.ValidationMessageFor(model => model.OrganizationName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Address)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Address)
#Html.ValidationMessageFor(model => model.Address)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.City)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
------Controller-----
//
// GET: /Create
public ActionResult Create() <=== can this be the problem????
{
demo.Models.ViewModel vm = new demo.Models.ViewModel();
vm.ExternalContentModel = _repository.ExternalContent();
// Return the content from the External Model to the Create.
return View(vm);
}
//
// POST: /MailingReferences/Create
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(Reference reference) <=== can this be the problem????
{
if (ModelState.IsValid)
{
db.References.Add(reference);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(reference);
}
If you have different models then why don't you just create a editor templates for each model?
You can do this by creating a folder called "EditorTemplates" in the same folder your Create.cshtml view lives in. Now add a view for your model into that folder. The view should be named the same as your model class. E.g. a class called FooBarModel would have an editor template called FooBarModel.cshtml.
You would then just use the editor template by doing #Html.EditorFor(x => x.FooBar)

Adding model with user input and hard coded values

Okay so I am using the MVC framework. I have a view for adding a model. At the moment I am using the default "Create" controller.
I want to be able to create a model with my own variables pre-set. For example the model.UserId I want to set to the users Id. I want some values to be inputed by the user and I want some to be already set. Is there a way I could do something like this
(pseudo code)
model.matchId = 123
model.prediction type = "user input"
add model
here is my current code below
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Predictions</legend>
<div class="editor-label">
#Html.LabelFor(model => model.MatchId, "Match")
</div>
<div class="editor-field">
#Html.DropDownList("MatchId", String.Empty)
#Html.ValidationMessageFor(model => model.MatchId)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.UserId, "User")
</div>
<div class="editor-field">
#Html.DropDownList("UserId", String.Empty)
#Html.ValidationMessageFor(model => model.UserId)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Type)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Type)
#Html.ValidationMessageFor(model => model.Type)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Prediction)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Prediction)
#Html.ValidationMessageFor(model => model.Prediction)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
In the controller, you would set the values on the model before returning it to the View.
public class HomeController : Controller
{
public ActionResult About()
{
var model = new MyModel();
model.SomeId = 123;
model.SomeOtherProperty = "Hello World";
return View(model);
}
}

How do I bind data from Telerik ComboBox to my data model

Why won't my Telerik ComboBoxFor bind my value and fill my ComboBox via AJAX?
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<div class="editor-field">
#Html.EditorFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)
</div>
<div class="editor-field">
#(Html.Telerik().ComboBoxFor(model => model.VendorId)
.Name("ddlVendor")
.ClientEvents(events =>
{
events.OnLoad("onVendorLoad");
//events.OnChange("onVendorChange");
events.OnDataBinding("onComboBoxDataBinding");
}
)
.DataBinding(bind => bind.Ajax().Select("_AjaxGetVendors", "Car"))
)
</div>
<p>
<input type="submit" value="Зберегти" />
</p>
</fieldset>}
In my controller I get entity but VendorId == 0.
[HttpPost]
public ActionResult Create(Car obj)
{
dm.InsertModel(obj);
return RedirectToAction("Create");
}
Option 1
Remove .Name("ddlVendor") from your ComboBox if you don't need it.
Option 2
Rename your ComboBox as follows and update any client event references to the control:
.Name("VendorId")

Ajax.BeginForm redirects action page(MVC 4)

I use 'Ajax.BeginForm' in my application,but for some reason my form is redirecting to {controller}/{action} with right json data instead of start {OnComplete = "Add_OnComplete"}:
View:
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
#using (Ajax.BeginForm("Create", new AjaxOptions { OnComplete = "Add_OnComplete"}))
{
<fieldset>
<legend>Add</legend>
<div class="editor-label">
#Html.LabelFor(model => model.FullName)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.FullName)
#Html.ValidationMessageFor(model => model.FullName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Email)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.Email)
#Html.ValidationMessageFor(model => model.Email)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.PhoneNumber)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.PhoneNumber)
#Html.ValidationMessageFor(model => model.PhoneNumber)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Status)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.Status)
#Html.ValidationMessageFor(model => model.Status)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<script type="text/javascript">
function Add_OnComplete(context) {
var JsonAdd = context.get_response().get_object();
if (JsonAdd.Success) {
//TODO
}
}
</script>
Controller:
public PartialViewResult Create()
{
return PartialView();
}
[HttpPost]
public JsonResult Create(Subscribe model)
{
if (ModelState.IsValid)
{
_entity.CreateSubscribe(model, SubscribeStatus.Customer.GetHashCode());
var message = new Message(MailSubject, MailBody, model.Email);
message.Send();
}
return Json(new
{
Success = true,
Message = "The person has been added!"
});
}
What I do wrong ? And what am I missing?
Thanks.
Remove that get_response().get_object() stuff.
Use just context.Success

Master-Detail Sample Code for MVC 3 Razor (using Ajax for details) - Part 2

I am currently showing a treeview in a left column.
When a user selects a node, i am loading the right column #details with the response from an ajax call. This works nicely.
I now want to submit the right columns #details via ajax as well. I am able to capture the post back to the server however when i return a string back to the #details section it is loading the entire page with string 'saved successfully'
I really want the string 'saved successfully' to be placed in a div element in the right column.
This is an ajax response, again doing another ajax response (which i want to return to the first ajax response).
Is this possible?
My edit form looks like the following
#using (Ajax.BeginForm("Edit", new AjaxOptions { UpdateTargetId = "#results" })) {
#Html.ValidationSummary(true)
if (Model != null) {
<fieldset>
<legend>Code</legend>
#Html.HiddenFor(model => model.CodeID)
<div class="editor-label">
#Html.LabelFor(model => model.Description)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Description)
#Html.ValidationMessageFor(model => model.Description)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Note)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Note)
#Html.ValidationMessageFor(model => model.Note)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.DateModified)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.DateModified)
#Html.ValidationMessageFor(model => model.DateModified)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.TopicID)
</div>
<div class="editor-field">
#Html.DropDownListFor(model => model.TopicID, (SelectList)ViewData["Topics"], "Select")
#Html.ValidationMessageFor(model => model.TopicID)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Special)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Special)
#Html.ValidationMessageFor(model => model.Special)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Html)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Html)
#Html.ValidationMessageFor(model => model.Html)
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
<div id="results">
Status
</div>
Make sure you have included the following script to your page if you want to use the Ajax.* helpers:
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
If you don't include it there is nothing out there to make sense of the HTML5 data-* attributes emitted by the Ajax.* helper and AJAXify this form => the form performs a normal submit and renders the results.

Resources