When I put a form inside a Telerik tabstrip, the form elements are not get rendered in the HTML. But input elements are rendered. This form is working fine outside tabstrip.
tabstrip.Add()
.Text("Variants")
.Content(() =>
{
%>
<form action="#" id="form1" method="post">
<input id="option" type="text" />
<input type="submit" value="save" /></span>
</form>
<%
});
try to use something like this :
tabstrip.Add()
.Text("Variants")
.Content(
{%><text>
%>
<form action="#" id="form1" method="post">
<input id="option" type="text" />
<input type="submit" value="save" />
</form>
<%
</text>
});
I have solved this problem
Kenod helper ignore first form if you put empty form and after that put your
actual form it will ignore the first form and take your form
#{Html.Kendo().TabStrip().Name("TabStrip").TabPosition(Model.TabStripPosition).Items(items =>
{
foreach (var tab in Model.TabItems)
{
items.Add()
.Text(tab.Title)
.Content(#
#Html.Raw("")
#using (Html.BeginForm("", "..","..", new { enctype = "multipart/form-data", id = "..." }))
{ #Html.Partial(tab.PartialView, tab.Model)}
</text>
).Selected(true)
}
}).Render();
Related
I have a hidden form in a dialog which I want to submit automatically.
HTML Code :
<form #formVal method="POST" [action]="urlvalue">
<p *ngFor="let item of redirectData.RedirectData.Form.Parameter;
let pindex = index;">
<input type="hidden" [name]="item.name" [value]="item.value">
</p>
</ form>
`
In my previous angular 1.5 code I was doing
$timeout(() => {
angular.element('#3DSForm').submit();
}, 100);
and it was working but here in Angular 6 I tried using ViewChild in ngAfteronInit but still no luck I am getting error for native element, I even used ngNoform in my HTML but didn't work out.
#ViewChild('formVal') form: ElementRef;
setTimeout(() => {
this.form.nativeElement.submit();
}, 200);
Kindly suggest what am I missing
You probably have some element called submit.
Example:
<input type="hidden" name="submit">
Rename it to something else, e.g btnSubmit.
You should call click event for submit button like this,
<form #formVal method="POST" [action]="urlvalue">
<div *ngFor="let item of redirectData.RedirectData.Form.Parameter; let pindex = index;">
<input type="hidden" [name]="item.name" [value]="item.value">
</div>
<input type="hidden" name="submit" #submitBtn>
</ form>
in ts file
#ViewChild('submitBtn') submitBtn: ElementRef;
submitForm() {
this.submitBtn.nativeElement.click();
}
after that call the submitForm() function from where you want to submit the function.
I was able to achieve it using HTMLFormElement.
<form ngNoForm name="myForm" id="myForm" [action]="urlvalue" method="POST">
<button type="submit" class="test" style="visibility: hidden;"></button>
</form>
This code in the component.
const form: HTMLFormElement = document.getElementById('myForm');
form.submit();
I have a HTML form which is in a partial that is loaded via jquery.load(). My partial looks something like this:
#Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data", id = "addComicForm"}){
<div class="add-comic-submit">
<input type="submit" value="haha" name="haha" />
</div>
}
On IE7-8 It's not rendered properly and does not create a form attribute, however, if I manually insert the form code such as
<form action="/ManageComics/ComicAdder" enctype="multipart/form-data" id="addComicForm" method="post" novalidate="novalidate"> </form>
It works properly.
Because you are doing it wrong. It should be like this:
#using (Html.BeginForm("ComicAdder", "ManageComics", FormMethod.Post, new { enctype = "multipart/form-data", id = "addComicForm" }))
{
<div class="add-comic-submit">
<input type="submit" value="haha" name="haha" />
</div>
}
another way should like this:
#{
Html.BeginForm("your actionName", "your controllerName", FormMethod.Post);
}
<div class="add-comic-submit">
<input type="submit" value="haha" name="haha" />
</div>
#{
Html.EndForm();
}
I have a basic form for which I want to handle buttons inside the form by calling the ActionResult method in the View's associated Controller class. Here is the following HTML5 code for the form:
<h2>Welcome</h2>
<div>
<h3>Login</h3>
<form method="post" action= <!-- what goes here --> >
Username: <input type="text" name="username" /> <br />
Password: <input type="text" name="password" /> <br />
<input type="submit" value="Login">
<input type="submit" value="Create Account"/>
</form>
</div>
<!-- more code ... -->
The corresponding Controller code is the following:
[HttpPost]
public ActionResult MyAction(string input, FormCollection collection)
{
switch (input)
{
case "Login":
// do some stuff...
break;
case "Create Account"
// do some other stuff...
break;
}
return View();
}
you make the use of the HTML Helper and have
#using(Html.BeginForm())
{
Username: <input type="text" name="username" /> <br />
Password: <input type="text" name="password" /> <br />
<input type="submit" value="Login">
<input type="submit" value="Create Account"/>
}
or use the Url helper
<form method="post" action="#Url.Action("MyAction", "MyController")" >
Html.BeginForm has several (13) overrides where you can specify more information, for example, a normal use when uploading files is using:
#using(Html.BeginForm("myaction", "mycontroller", FormMethod.Post, new {enctype = "multipart/form-data"}))
{
< ... >
}
If you don't specify any arguments, the Html.BeginForm() will create a POST form that points to your current controller and current action. As an example, let's say you have a controller called Posts and an action called Delete
public ActionResult Delete(int id)
{
var model = db.GetPostById(id);
return View(model);
}
[HttpPost]
public ActionResult Delete(int id)
{
var model = db.GetPostById(id);
if(model != null)
db.DeletePost(id);
return RedirectToView("Index");
}
and your html page would be something like:
<h2>Are you sure you want to delete?</h2>
<p>The Post named <strong>#Model.Title</strong> will be deleted.</p>
#using(Html.BeginForm())
{
<input type="submit" class="btn btn-danger" value="Delete Post"/>
<text>or</text>
#Url.ActionLink("go to list", "Index")
}
Here I'm basically wrapping a button in a link. The advantage is that you can post to different action methods in the same form.
<a href="Controller/ActionMethod">
<input type="button" value="Click Me" />
</a>
Adding parameters:
<a href="Controller/ActionMethod?userName=ted">
<input type="button" value="Click Me" />
</a>
Adding parameters from a non-enumerated Model:
<a href="Controller/ActionMethod?userName=#Model.UserName">
<input type="button" value="Click Me" />
</a>
You can do the same for an enumerated Model too. You would just have to reference a single entity first. Happy Coding!
Is there any way to get information from my model during a result flagged HttpPost if I cannot pass it as a parameter?
[AcceptVerbs(HttpVerbs.Post)]
public FileUploadJsonResult Upload(HttpPostedFileBase file, IwantMyModelToo! )
I can't really get the actual view model to go through the method, though. Any thoughts?
Here is the primary view. (FoldersController)
<hr class="space" />
<div>
<% Html.RenderAction<Controllers.ImagesController>(i => i.Create(Model)); %>
</div>
<hr class="space" />
Here is the partial view (ImagesController, where the Create method resides)
// bunch of fun jQuery for jQuery Form Uploading.
</script>
<div class="span-24 last">
<fieldset>
<legend>Upload Image</legend>
<form id="ajaxUploadForm" action="<%= Url.Action("Upload", "Images")%>" method="post" enctype="multipart/form-data" >
<div>
<label for="file">Select Image</label><br />
<input type="file" name="file" />
</div>
<input id="ajaxUploadButton" type="submit" value="Upload" />
</form>
</fieldset>
</div>
In your code sample there are no properties connected to any model... Here I have added one (Foo) in a hidden form field, and created a class called MyModel.
View
<div class="span-24 last">
<fieldset>
<legend>Upload Image</legend>
<form id="ajaxUploadForm" action="<%= Url.Action("Upload", "Images")%>" method="post" enctype="multipart/form-data" >
<div>
<%= Html.Hidden("Foo", "bar") %>
</div>
<div>
<label for="file">Select Image</label><br />
<input type="file" name="file" />
</div>
<input id="ajaxUploadButton" type="submit" value="Upload" />
</form>
</fieldset>
</div>
Model
public class MyModel
{
public string Foo {get;set;}
}
Controller
public FileUploadJsonResult Upload(HttpPostedFileBase file, MyModel model)
{
//model.Foo should be accessible here
}
Context
Let`s say i have:
In layout Site.Master:
<div class="leftColumn">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
<div class="rightColumn">
<% Html.RenderPartial("_Login"); %>
<asp:ContentPlaceHolder ID="SideContent" runat="server" />
</div>
Login partialView looks like:
<form action="/myApp/Account/Login" method="post">
<input name="name" />Name<br />
<input name="password" type="password" />Password<br />
<button>Login</button>
</form>
Is it possible to update only login widget form, not the entire content page?
If you are referring to a http post, only a post initiated (it can also be initiated by javascript) by a submit button from within the form will be posted to the server.
If your forms are nested then this won't work. The outer form will always post to the server.
In the sample HTML below, clicking on the submit button on the first form will not send the values from the second form to the server. Likewise, clicking the second submit button won't post the values from the first form.
<html>
...
<body>
<div>
<form action="/Login/Login" method="post">
<input type="text" name="username" value="" />
<input type="text" name="passowrd" value="" />
<input type="submit" name="login" value="Login" />
</form>
<form action="/Login/AdminLogin" method="post">
<input type="text" name="username" value="" />
<input type="text" name="passowrd" value="" />
<input type="submit" name="login" value="Login Admin" />
</form>
</div>
</body>
</html>
If you only wish to update/change one of the form section, then no this can not be done without using javascript and performing a javascript post(aka Ajax).
If you build a controller method that accepts a FormCollection and your view has two forms defined, the formcollection returned will either be populated with values from form A or form B. You can inspect the formCollection and branch your logic based on the value therein. If you want the be very explicit you could have the same hidden variable occur in both forms with a value that would help your make your choice.
That's one approach. there are a few ways to deal with this I'm sure.
If you have two simple forms, you can use this aproach:
You create two different partial views.
#model CustomerInfoModel
#using (Ajax.BeginForm("CustomerInfo", "Customer", new AjaxOptions { HttpMethod = "Post", OnBegin = "InfoLoading", OnComplete = "InfoCompleted" }, new { id = "info", #class = "form-horizontal" }))
{
<input type="text" class="form-control" name="Name" id="Name" value="#Model.Name" />
<input type="email" class="form-control" name="Email" id="Email" value="#Model.Email" />
<button type="submit" id="save-info" class="btn-medium red">Save</button>
}
and
#model CustomerPasswordChangeModel
#using (Ajax.BeginForm("CustomerPasswordChange", "Customer", new AjaxOptions { HttpMethod = "Post", OnBegin = "InfoLoading", OnComplete = "InfoCompleted" }, new { id = "change", #class = "form-horizontal" }))
{
<input type="password" class="form-control" name="OldPassword" id="OldPassword" value="" />
<input type="password" class="form-control" name="NewPassword" id="NewPassword" value="" />
<button type="submit" id="save-change" class="btn-medium red" autocomplete="off">Save</button>
}
In your parent view,
#Html.Partial("CustomerInfo", Model.CustomerInfo)
and
#Html.Partial("CustomerPasswordChange", Model.CustomerPasswordChange)
In Controller:
[HttpPost]
public ActionResult CustomerInfo([Bind(Include = "Name,Email")] CustomerInfoModel model)
{
if (ModelState.IsValid)
return new Json(new { success=true, message="Updated.", errors=null);
// do you logic
return new Json(new { success=false, message="", errors=getHtmlContent(ModelState.Values.SelectMany(v => v.Errors).ToList(), "ModelError"));
}
[HttpPost]
public ActionResult CustomerPasswordChange([Bind(Include = "OldPassword,NewPassword")] CustomerPasswordChangeModel model)
{
if (ModelState.IsValid)
return new Json(new { success=true, message="Updated.", errors=null);
// do you logic
return new Json(new { success=false, message="", errors=getHtmlContent(ModelState.Values.SelectMany(v => v.Errors).ToList(), "ModelError"));
}
This will do what you want to do.
Note: getHtmlContent method is just generating an error message to be displayed on page. Nothing so special. I may share it if required.
Your question is not very clear.
But as far as I could understand, the answer is most likely yes. You can update anything you want depending on the user input.
if(pass != true)
{
ViewData["Message'] = "Hey your login failed!"; Return View("Login")
}
On ViewPage
<form action="/tralala/Account/Login" method="post">
<input name="name" />Name<br />
<input name="password" type="password" />Password<br />
<button>Login</button>
<div style="color: red"><%=ViewData["Message"] %><div>
</form>