We Keep Coding

Textbox.text always returns empty string in code behind c#

Well, I'm trying to do a simple command: get the text from TextBox. I've searched for that, but every answer failed for me.
In my code aspx:
<form id="form1" runat="server" method="post">
<div class="form">
<div class="form-search ngen-search-form">
<span id="search-trigger" class="form-search-submit">
<img src="Imagens/Lupa_Icon 2.png" id="lupa"/>
</span>
<asp:TextBox ID="txtBoxSearch" runat="server" CssClass="form-search-input" placeholder="Pesquise..." ViewStateMode="Enabled"/>
</div>
</div>
</form>
I have a Javascript function that verifies what key my client pressed:
$(document).keypress(function(e) {
if(e.which == 13){
if( document.getElementById("txtBoxSearch").value == "" ) return true;
else {
<% setSearch(); %>
document.getElementById("testeArv").innerHTML='<%=search.ToString()%>';
return false;
}
}// First if
});
And finally, my function setSearch() in code behind is:
public void setSearch( )
{
if( !Page.IsPostBack ) {
search = txtBoxSearch.Text;
}
}

Main mistake is about how to call codebehind method in jQuery. Take a look here
to know how to do it. Summary: you need ajax
Then you will have to keep in mind that it does Page.IsPostBack.
With !Page.IsPostBack you are saying "first page access" but when you press the button !Page.IsPostBack will be false. If you try the same example so:
public void setSearch( )
{
if(!Page.IsPostBack) {
// First page access
search = txtBoxSearch.Text;
} else {
// The page has been reloaded
search = txtBoxSearch.Text;
}
}
It will work. (The else will run)
I am not sure but I have tried it (without jQuery) with a button and the same error occurs. You want to run the function when the Enter is pressed so the page will do the reload. Take a look here.
Maybe it helps you in some way.

It's the <form> tag blocking your way to get the value in post back. Remove the <form> tag and use AutoPostBack=true for your text box. You won't need to use jQuery to catch the event and the value.

You can't call code behind code from client-side code. They execute on different machines.

Form confirmation with Razor, Url.Action

I can find many different ways to add confirmation to a form submission. The issue in my case is either they submit the form anyway or they just sit there and dont do anything. Any suggestions would be appreciated. I have added events to both the form onsubmit and the button onclick, no dice. The ActionResult in this case uses HttpPostRequest to send the form data. Works great, just want to add a confirmation dialogue that works.
<script>
function SubmitConfirm(){
if (confirm("Are you sure want to submit this form?"))
return true;
else
return false;
}
<form name="Form1" method="post" action="#Url.Action("PostForm", "MyController")" id="Form1">
...
<input type="submit" value="Submit Posting" onclick="SubmitConfirm()" />

You probably want to display that dialog without reloading the page, just when your submission is successful rather than taking them to a new page or implementing some sort of conditional refresh. So you could set up your form as such...
<form name="Form1" id="Form1">
...
<input type="button" id="submit" value="Submit Posting" />
</form>
And using jQuery set up your actual submit thusly...
$(document).ready(function () {
$('#submit').click(function() { submit(); });
});
function submit() {
if (SubmitConfirm())
{
var data = $('#Form1').serialize();
$.post('MyController/PostForm', data, function(result) {
if (result === 'success') {
// just using an alert here as a placeholder
alert('Your submission has been received!');
}
});
}
}
Which means that in your controller, you'll have the following...
[HttpPost]
public ActionResult PostForm([form arguments])
{
var success = // deal with form results, return true if everything is ok
return new Content(success ? "success" : "failure");
}
To recap, you'd submit your form data, process it, and give the user feedback as to whether it was successfully processed or not without the user ever leaving the page, which also opens the door to make it easier to re-submit data if necessary and do validation, again without the user leaving the page or having to wait for the page to reload.
EDIT: Fixed typo and modified submission logic.

Partial View not rendered on the same Page in asp.net mvc

I want to display the details of particular record on same page, user can choose the product from the list of Product name and as soon as user clicks on the links the details of the specific product should display on the other side of the page i.e. othe div. I tried it by creating partial View and Ajax but the details are not displayed on the separate page a new blank page is opened with the name of Partialview and the records are displayed there, but i want details on the same page.ProductName are comming from database, first time the page loads it must contains the details of first record by default, that is working OK. Please try to solve this problem. Thanks
HomeController.cs
public class HomeComtroller:Controller
{
dbProductEntity Productdbentity=new dbProductEntity();
public ActionResult ProductDetails(int id)
{
var query=Productdbentity.tbl_product.First(c=>c.ProductId==id);
return PartialView("PartialView",query);
}
public ActionResult Product()
{
return View(dbentity.tbl_product.ToList());
}
PartialView.cshtml
#model MvcProject.Models.tbl_product
<label> #Model.ProductName </label>
<label> #Model.ProductDesc </label>
Product Page
#model List<MvcProject.Models.tbl_product>
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$(div.product a").click(function(e){
var url=this.ref;
$get(url,{},function(data) {
$('#product-detail').html(data);
});
});
});
</script>
</head>
<body>
<div class="product">
<ul class="list">
#foreach(var item in Model)
{
<li><a href="#Url.Action("ProductDetail","Home",new {id=item.ProductId})">
#item.ProductName</a></li>
}
</ul>
<div class="product-detail">
#{Html.RendererPartial("PartialView",Model.FirstOrDefault());}
</div>
</div>
</body>
</html>

You should cancel the default action of the anchor by returning false from your .click event handler:
$(document).ready(function() {
$(div.product a").click(function(e) {
var url=this.ref;
$get(url,{},function(data) {
$('#product-detail').html(data);
});
});
return false; // <-- That's the important bit you were missing
});
If you do not return false from the .click handler, the browser will simply follow the linking to which your anchor is pointing stopping any javascript execution you might have started. Returning false ensures that the browser will not redirect away from the current page, leaving you the possibility to execute an AJAX request and update the current view.

I think you are missing "." after the "$" in first line in below code. And in second line, since "product-detail" is a class name so in jQuery selector use "." (not "#") before class name. Below is the corrected code:
$.get(url,{},function(data) {
$('.product-detail').html(data);
});
For more have a look at http://api.jquery.com/jQuery.get/

You have to stop the default behavior of click event on a link.
<script>
$(function(){
$("div.product a").click(function(e){
e.preventDefault();
var url=this.ref;
$('.product-detail').load(url);
});
});
</script>

Hiding element before document is ready?

I have a div that needs to be hidden by default. It then can be toggled by a button:
<script type="text/javascript">
function toggle() {
text = document.getElementById('add_view');
var isHidden = text.style.display == 'none';
text.style.display = isHidden ? 'block' : 'none';
}
$(document).ready
(
function () {
toggle();
$("#add_view, #btnToggle").click(function (e) {
e.stopPropagation();
});
$(document).click(function () {
toggle();
});
}
);
</script>
It is working fine. The only problem is, when I refresh the page, I momentarily see the div before it is hidden.
What could I do to prevent that?
Thanks

You probably need to hide your element by default, and then use the button to toggle visibility. Try this:
<div id="add_view" style="display:none">....</div>

Make the element hidden in your html to begin with.
<div id="add_view" style="display: none;"></div>

Initially, you have to hide it by setting style="display:none;" of the div. Once when u want to toggle it, you have to use it as
document.getElementById(Id).style.display="";
in javascript.

jquery alertbox is getting disabled automatically

I have written the code on
ascx script:
<script src="JScripts/jquery.alerts-1.1/jquery.alerts.js" type="text/javascript"></script>
<script>
$(function() {
$('#ImageButton1').click(function() {
jAlert('Please enter a valid Suggestion ID.', 'Case Entry');
});
});
</script>
and on
Code behind:
Page.ClientScript.RegisterStartupScript(this.GetType(), "Window", "callAlert();", true);
the problem is alert box is automatically getting disabled after some time when page load fully
What could be the reason that the alert box is being disable after clicking on OK button and how to call the callAlert function in proper way.

If you are using Master page or pages then you won't get the Client Id of the button as you are declared it should be declared as $('#<%=ImageButton1.ClientID%>') or $('[id$=ImageButton1]') hope it will solve you problem.
$(document).ready(function(){
$('#<%=ImageButton1.ClientID%>').click(function() {
alert('Please enter a valid Suggestion ID.', 'Case Entry');
});
});

You can try to put the following line before the function
$(document).ready(function() {
This will make it:
$(document).ready(function() {
$('#ImageButton1').click(function() {
jAlert('Please enter a valid Suggestion ID.', 'Case Entry');
});
});
});
If you wait till the page is ready, the alert box won't be overwritten (I hope x)).
Also when you check that text box, check if the condition is false, then give the alert.
Is the condition not false? Build in a check to check if the condition is really true. If so? Redirect.
EDIT:
var answer = Confirm: ("This page will now redirect. Are you ready?")
if (answer)
//redirect
else
return

OK, so first it's important to understand that $(function(){... and $(document).ready(function() {... are equivalent, and nothing inside either will execute until the page is fully loaded. In other words, there's no need to use
Page.ClientScript.RegisterStartupScript(this.GetType(), "Window", "callAlert();", true);
That can be removed. Also, I see that you're probably using web forms. Be mindful that the Id attribute that will be rendered is not equal to the Id of the control attribute. In other words, if you have a runat="server" control with an Id of ImageButton1, using the syntax $('#ImageButton1') in your jQuery won't work.
Taking this into account, I've added an example below that uses selectors based on class attributes.
<script type="text/javascript">
$(function () {
$('.ImageButton1').click(function (e) {
var text = $('.TextBox1').val();
var redirect = true;
if (!text) {
redirect = confirm('Empty...are you sure?');
}
if (redirect) {
window.location.href = 'http://your-redirect-here.com';
}
});
});
</script>
<input class="TextBox1" type="text" />
<input class="ImageButton1" type="button" value="Click" />
That should get you where you want to go. Let me know if you have any questions.

var answer = Confirm: ("This page will now redirect. Are you ready?")
if (answer)
{
//redirect
} else
{
return false;
}

Put this after jAlert Box:
return false;
And call the function like this:
return callAlert();