I want to show a pop-up on click of a button. The pop-up should have a file upload control.
I need to implement upload functionality.
The base page has nested forms. Totally three forms nested inside. If I comment the two forms then I can able to get the posted file from Request Object. But I was not suppose to comment the other two forms. With nested forms I am not getting the posted file from the Request object.
I need some protocols to implement this.
I am using C#. The pop-up was designed using jQuery.
As suggested, I am posting the sample code here.
<form id="frmMaster" name="frmMaster" method="post" action="Main.aspx" Runat="server" enctype="multipart/form-data">
<form method='Post' name='frmSub'>
<input type="hidden" name='hdnData' value=''>
</form> // This form is driven dynamically from XSL
<form method='Post' name='frmMainSub'>
<input type="hidden" name='hdnSet' value=''>
</form>
</form>
Note:
Commenting the inner forms works fine. But as it required for other functionalities not suppose to touch those forms.
I have given this code for sample purpose. The actual LOC in this page is 1200. and the second form is loaded with lots of controls dynamically. I have been asked not to touch the existing forms. Is it possible to do this functionality with nested forms?
You can have multiple HTML form tags in a page, but they cannot be nested within one another. You will need to remove the nesting for this to work. If you post some of your code, you're likely to get more help with some specific recommendations to address this.
From your posted code, it's also unclear why you'd even be tempted to use multiple forms. Can you elaborate on why you think you need multiple forms here? You don't have explicit actions in your subforms, so it's hard to tell where you want them to post, but I'm guessing it's all posting to the same page. So, why multiple forms at all?
You could always try putting one of the inner forms onto another page and serving it up in an iframe. That way the inner form is not technically inside the outer form. This will require you to alter some of the html, but there's really no way around that.
In your situation you're looking at a hack no matter how you put it. You aren't supposed to have nested forms.
Since you're using Javascript to do this, you could try moving the form element that is posting back out of the parent forms and then performing the .submit() action after it's been moved.
It's a ugly hack - but I so is the HTML -- :) (I kid, I kid!)
Related
I have a requirement for multiple tasks to be populated dynamically in response to a user 'add task' button. I don't know how many tasks will be created by the user and would prefer not to set a maximum number with hidden fields as this would be inefficient with regards to database storage space.
Tasks can be thought of as child elements to notes and are stored in separate tables. I've managed to display multiple tasks on the view but I'm less confident with front-end development and am unsure of how I can add an input field without calling a post-back, thus entering 'mid-stream save' territory..
<html>
<div class="container">
<!-- #using(Html.BeginForm()) { -->
<div>
<label asp-for="Note">Note</label>
<input id="Note" />
<span asp-validation-for="Note"></span>
<label asp-for="Task">Task</label>
<input id="Task" />
<span asp-validation-for="Task"></span>
</div>
<div>
<button type="button">Add Task</button>
<input type="submit" value="Save" />
</div>
<!-- } -->
</div>
</html>
I have also made a small jQuery function that can create task inputs upon the 'add task' button, but with little success in connecting it to the controller/model.
I've had AJAX with JSON recommended to address this requirement but I'm unsure of how this can be implemented in a form and how this can then be read by the controller and ultimately the model?
I'm open to design alternatives, should it better suit my solution.
Ok, I'll try to explain here the approach I usually use to this type of problems, after quite a while developing different applications it finished as one of my favorites.
First of all, If I'm understanding you well, you have a view where a form is build, as a part of a client interaction you need to inject elements that depends on the main entity of your form (usually as a one to many relationship). I will call those "subforms" during this answer.
You need to:
A) Manage client interaction with the elements added/modified/replaced
B) Send the final data to your server's controller so data can be persisted into database.
My approach to this type of situations is try to manage all the client interactions in the client, sending final data only on the end, after user pushes "Save" button.
Obviously... this is not valid for EVERY situation, as sometimes specific requirements could make this solution not recommended.
For the client part:
I build the core of the form on a normal way, through a standard view, usually I place specific containers to inject there the information of the "dynamic" data.
On the "Add task" button I add a listener that creates the HTML for one element of the subform and appends it to the container. Usually this code includes a delete button to eliminate it from the DOM as a whole. I also have a listener to manage those interactions.
Ok... so you now have a form where some buttons can add and remove small parts of code that represents individual elements of your subform.
Include in your client code a data structure (I usually use a JSON object) that represents a list of elements of the subform.
When your user hits the "Save" button, capture the event and, before sending data back to server make this two things:
Loop through your subform structure reading the info that it contains at this moment and store it in your client data structure (the JSON object I refer before). Now you have a JSON object with all your subform information.
Stringify it and store it in a hidden text component which is sent within the form. All of your "subform" fields could be outside of the form, as they doesn't need to be sent, the info travels back to the server in a "class instance" as a JSON structure.
In the server:
When your controller receives your form data, there will be a field which stores a string representing the whole info your user sent through the "subform".
Now you just need to get this info and manage it in the way you like. You can, for example, design a class to load this type of info and send it to the database through your usual persistence engine.
Keep in mind that in this package you are storing not only the elements added, you also have the elements that have been changed since the last edit, so you will probably have to look for them in the database and modify them.
This is quite a wall of text, and probably it's less clear to understand the idea than it's on my mind, so feel free to ask if you don't understand something or there is anything that is not clear enough.
I just implementing AngularJs on a website with is written in asp.net webforms.
I figure out when ng-Submit on button, the form is also making Post call.
How to stop form from submitting and let the angular do its work.
My sample code is as below.
<form id="form1" runat="server">
<div >
<input type="text" data-ng-model="enteredName" ng-model-instant/>
<button class="btn" value="add" data-ng-submit="addName()" >Add</button>
</div>
</form>
//Add Name function
$scope.addName = function () {
$scope.names.push($scope.enteredName);
$scope.enteredName = '';
};
Note: The ng-submit controller is working fine it is adding the input to the string list but after that form makes post call. and page go to IsPostBack.
Anyone guide me to handle the form from not posting.
If you plan on making an angular form using .NET you should probably use .NET MVC instead of .NET webforms. The reason is that all webforms pages have their own <form> element that is used to maintain state. This can be seen when you make a new webforms page in Visual studio, it automatically adds:
<form runat="server" ID="Form1">
Additionally, when you make webforms controls like <asp:LinkButton> or other things that provide "enhanced" functionality from base HTML, they actually get rendered as <input> tags that use the parent form. Therefore, to take advantage of any of the features of webforms, you really need to stick to their model and it gets very difficult to add anything else on top of that. It's possible, and sometimes quite easy, but it's a very long learning curve to figure out all of the gotchas along the way.
Conversely, .NET MVC gives you less out of the box, exposing the raw HTML to you with very few wrappers and things like postbacks or viewstates. I think that's a much better host for something that is using angular, especially if you are using angular for forms, which will prevent you from using some of .NET's webforms functionality anyways.
I'd start by using ng-click instead of ng-submit. And i would also stay clear of asp.net controls on pages that use angular.
I have a web app that has a form on just about every page. In order to make sure each form renders the same, as to make changes easier, I want to render all of my form controls in c# in a central place so if I need to add a class to the input or change something, I only have to do it once.
At the moment, I am just using a load of static classes like TextInputHelper, CheckboxInputHelper etc that use StringBuilder to build up the HTML and returns a string to my view.
For example, all of my forms controls are of the basic form:
<section>
<label class="label">Label Text</label>
<label class="input">
...Input Element...
</label>
</section>
What I would like to do is improve this situation as I still have a lot of duplication between the different helper classes, particularly for the wrappers to the form elements. My initial thoughts are to have a class called something like BaseFormControl that has a virtual Render method that has the outer wrapper for the control, then create other classes that implement this to do specific things like a TextFormControl that puts
<input type="text".....
inside the wrapper.
Am I on the right path for this, and/or is there a design pattern that is appropriate for what I want to do?
From my POV what I read is that you over complicating your server side just because of a CSS/HTML standardization that be easily solved from the client side.
If you still want to go for the server side approach the pattern that seems to apply to your approach is the Adapter(Wrapper) pattern meaning that you probably would want to create control wrapper clases to meet your needs for each control that renders a different html from what is offered by ASP.NET built-in controls.
If what you want to do instead is to format a group of controls then a UserControl is way much better approach.
Remember that ASP.NET was build with the spirit of trying to keep layers separated the View from the Code therefore any attempt to generate html from the server side has to be an exception and not a rule.
I noticed a weird problem in C# and it's been bothering my head for weeks, so I thought I just put this question out there. So my question is basically how does C# handle multiple client <form>'s inside the server form <form runat="server">? I've been writing a web site and I've encountered a very strange problem.
So here's the essential breakdown to recreate this problem.
1) Have a simple javascript method with an alert inside that fires if it is called.
eg: function tester() {
alert("adf");
}
2) Open a brand new Web Forms project in Visual Studios 2010. (It should have a <form runat="server"> already created inside for you.)
eg: <form runat="server"> <form/>
You can only have one of these.
3) Now inside this form tag, write an empty form tag that should theoretically do nothing:
eg: <form action=""><form/>
4) Now Create another form right after this form that calls the javascript method.
eg: <form action="javascript:tester()" >
<button type="submit" >Search</button>
</form>
5) Run this code now, and you should see the alert pop up after you press the button.
6) Now take out the empty form tags:
Delete: <form action=""><form/>
7) Run code again, and now you should find that your javascript call is not firing anymore, and it would rather be refreshing the page every time you press the button.
So this is my problem that has been bothering me, and I hope some guru may have an answer for me soon, for this has been bothering my head for a long time. I have no idea why it works with two forms, and why it doesn't with just one form. Hope someone can answer this soon. Thanks so much in advance!!!
Some Helpful Information:
According to this page, I can have multiple "client" based form tags and that shouldn't be a problem...
Why you can't have a page with multiple server-side Form tags?
...however... the problem somehow still manifests itself.
Having a form tag within a form tag is against the html specifications, and thus any result would be undefined behavior.
For your particular problem, can you not do this?
<button onclick="tester();">Search</button>
In my parent page I have a hidden control:
<input type="hidden" id="CaseID" value="" runat="server" />
I need for my page in the iFrame to be able to get this value from C# code-behind. I have so far been unsuccessful.
In the child page's code-behind I have tried variations of this:
var theParent = this.Page.Parent;
But I always get null back.
Any assistance would be greatly appreciated.
From the server's perspective, there is no relationship at all between a page which launches an iframe, and the page which is contained within that iframe. They are two completely distinct and unrelated HTTP Requests. In your code-behind, they have nothing in common and there is no way to refer to one from the other.
Thus, you'll need to use the same approach as you would if you needed to "move" data from one page to another. Two common ways (though by no means are these the only ways or even the best ways) are:
The Session object. PageABC can store a piece of data in the session, and PageXYZ can read that data from the session.
URL Parameter on the request. PageABC can call a URL (maybe even use it as the SRC of an iFrame, hint-hint) something like this: PageXYZ.aspx?someKey=someValue. PageXYZ can access URL params from the Request object (Request["someKey"])
Something else to consider: if PageABC and PageXYZ operate in conjunction with each other, maybe having them be separate pages isn't the best approach. It may make more sense for PageXYZ to actually be ControlXYZ and be contained on PageABC. It can still be presented to the user as a popup using jQuery dialogs (or using UpdatePanels and ModalPopupExtenders, if you're masochistic ;).