Remove ID from URL in ASP.net - asp.net

I want to remove the ID from the URL in ASP.net 2010.
I tried to search in the net but I didn't get a clear solution.
Can you help me please or send me links for a clear solution to understand and apply in my website?
I have a simple datalist in the page Architecture.aspx. this datalist get info from SqlDataSource1 (see code below).
When I press in the LinkButton (Image1), a new page (ViewProject) opens, in the URL I have (http://localhost:51550/Portfolio/ViewProject.aspx?ID=1). I dont want to show the ID:
<asp:DataList ID="DataList1" runat="server" DataKeyField="ID"
DataSourceID="SqlDataSource1" RepeatColumns="4" RepeatDirection="Horizontal" style="margin-right: 0px"
EnableViewState="false">
<ItemTemplate>
<asp:Panel ID="Panel1" runat="server" BorderStyle = "None" Height="250px" Width="200px">
<table id="Table1" runat="server" style="height: 50px">
<tr >
<td style="color: #000000; width: 75%; font-weight: lighter" align="center">
<asp:LinkButton Width="145px" Height ="200px" ID="Image1" runat="server" CommandName="ViewDetails" CommandArgument='<%#Eval("ID") %>' OnCommand = "Click_LinkButton1" >
<div class ="pic">
<asp:Image ID = "im1" runat="server" ImageUrl= '<%# Eval("mainPic")%>' Width="150px" Height ="200px" BorderWidth="0px" />
</div>
</asp:LinkButton>
</td>
</tr>
<tr >
<td style="width: 75%; font-weight: lighter; padding-left:19px">
<asp:Label ID="lbl2" runat="server" Text='<%#Eval("title") %>' ForeColor="Gray" Font-Names="Lucida Sans Unicode" Font-Size="12px"></asp:Label>
</td>
</tr>
</table>
</asp:Panel>
</ItemTemplate>
</asp:DataList>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:PortfolioConnectionString %>"
SelectCommand="SELECT [ID], [title], [mainPic] FROM [Project]">
</asp:SqlDataSource>
protected void Click_LinkButton1(object sender, CommandEventArgs e)
{
string url = "ViewProject.aspx?";
url += "ID=" + e.CommandArgument;
Response.Redirect(url);
}

You can use it as
protected void Click_LinkButton1(object sender, CommandEventArgs e)
{
string url = "ViewProject.aspx";
Session("ID") = e.CommandArgument;
Response.Redirect(url);
}
and can access it as on the page load event of another page
protected void Page_Load(object sender, System.EventArgs e)
{
String strID = Session("ID").ToString;
}
To learn more about sessions visit asp.net-tutorials.com/state/sessions/, MSDN Article ASP.NET Session State and How to: Read Values from Session State

haraman's implementation is not good. His implementation didn't check for missing "ID" in the session. That means if someone navigates directly to the page without having clicked on that link button, they're going to get a NullReferenceException. Why would they navigate directly there? Perhaps they bookmarked it. Or they refresh the page after their session expires. Or they share the link with a coworker.
Instead, you should pass the ID in the URL. There's nothing unprofessional about it. It's certainly preferable to the problems that not including it would cause. If you're concerned about the looks, you can make it look nicer. You don't have to utilize query string.
Query string example:
example.com/ViewProject.aspx?id=987
ASP.NET has a concept of routing, which you can utilize in your application for a clean URL. Using routing, your URL can look like this:
example.com/ViewProject/987
And with some additional tools, you can make it search engine/user friendly (Stack Overflow does this):
example.com/ViewProject/987/My-Fancy-Project

Related

how to bind memory stream to asp.net image controls with out using image url

We have a new requirement to show the signature image in result grid for each record. Currently we store the signature image as base64 format in our database .we are able to convert base 64 to memory stream.
We want to understand does any of your image control support to bind image from memory stream instead of Url .
You could keep images as base64 string form, and use data url.
The following is a example.
<asp:Image runat="server" ID="myImage" />
The code behind is
this.myImage.ImageUrl = "data:image/png;base64,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";
The premise is that you need to know all the MIME type of images.
Reference: data URIs
Sure, you can do it this way.
A gridview, listview, repeater control - they can all do this.
So markup for a grid view:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundField DataField="Animal" HeaderText="Animal" ItemStyle-Width="200px"/>
<asp:TemplateField HeaderText="Picture">
<ItemTemplate>
<asp:Image ID="Image1" runat="server"
Height="128px" Width="128px"
src='<%# "Data:Image/png;base64," + Eval("Image") %>'
/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
And the code to load up the gridview would be:
protected void Page_Load(object sender, System.EventArgs e)
{
if (System.Web.UI.Page.IsPostBack == false)
LoadGrid();
}
public void LoadGrid()
{
using (SqlCommand cmdSQL = new SqlCommand("SELECT Animal, Image from tblAnimals",
new SqlConnection(My.Settings.TEST4)))
{
cmdSQL.Connection.Open();
GridView1.DataSource = cmdSQL.ExecuteReader;
GridView1.DataBind();
}
}
Results:
Now I used a direct eval expression - but you could also use the ItemDataBound event of the gridview (or list view).
Also, I did hard code the "mine" type in above (assumed .png). You often might want to consider to save the file/mine type as a extra column in the database. But, if the picture types are to be all the same types - then a hard code right in the expression as per above will work fine.
If you have a lot of columns for this grid, then I tend to switch over to listview, since each column does NOT need a template, and I find for quick and dirty - grid view is ok, but listview is better for tweaking and lots of customizing. The trick is to get Visual Studio to generate the template + markup, and then blow out all templates except for item template. When you do this, then the crazy truckload of markup is reduced down to "easy" levels. And you can then with greater ease drop in controls - and you don't have template them.
So, the same listview for above would be this:
<asp:ListView ID="ListView1" runat="server">
<ItemTemplate>
<tr style="">
<td><asp:Label ID="AnimalLabel" runat="server" Text='<%# Eval("Animal") %>' /></td>
<td>
<asp:Image ID="ImageT1" runat="server"
Height="128px" Width="128px"
src='<%# "Data:Image/png;base64," + Eval("Image") %>'
/>
</td>
</tr>
</ItemTemplate>
<LayoutTemplate>
<table id="itemPlaceholderContainer" runat="server" border="0" style="">
<tr runat="server" style="">
<th runat="server" width="200">Animal</th>
<th runat="server">Image</th>
</tr>
<tr id="itemPlaceholder" runat="server">
</tr>
</table>
</LayoutTemplate>
</asp:ListView>
So there is somewhat "more" markup, but you can with much greater ease drop in asp.net controls - and you don't have add a templatefield - (about 4 extra lines of markup for every column - so in the long run, I like the listview.
it looks quite much the same, like this:
And the behind code would be 100% the same as above.

Hide EmptyDataTemplate but leave header visible

I have an EmptyDataTemplate on my ASP.NET webform which allows users to add a record to the database. Depending on the permissions of the user, this EmptyDataTemplate needs to be visible and hidden if no data is found (I have this working!)
For example, my user has Read Access only. When they search a specific criteria, no results are displayed they cannot see the EmptyDataTemplate. However, if they search a criteria, and there is data, data is displayed WITHOUT the headers.
Can someone please help explain why this is happening and if there's a way around it?
The headers are HeaderText on TemplateFields.
I'm hoping it's a general trick.
Thank you in advance for your help!
Please note, it's the HeaderText in the TemplateFields I want to display- not the in the emptyDataTemplate as they'll head up the columns of data that match the search criteria.
edit: code added as requested
For hiding the EmptyDataTemplate:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
Control control = null;
control = GridView1.Controls[0].Controls[0];
if (userManagement.getMIFReadWriteAccess() == "Read")
{
control.Visible = false;
Export_All.Visible = true;
}
else if (userManagement.getMIFReadWriteAccess() == "Write")
{
control.Visible = true;
Export_All.Visible = true;
}
}
in markup for the header text (i've only shown one column but the markup is the same for all of them)
<asp:TemplateField HeaderText="ID">
<ItemTemplate>
<asp:Label ID="lbl_Index" runat="server" Text='<%#Eval("id") %>'></asp:Label>
<asp:Label ID="lbl_ID" runat="server" Text="" Visible="false"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
EmptyDataTemplate:
<EmptyDataTemplate>
<div id="emptyData" runat="server">
<tr>
<th></th>
<th>Serial Number</th>
<th>Comments</th>
<th>Review Date</th>
<th>Approved By</th>
</tr>
<tr>
<td>
<asp:Button runat="server" ID="btInsert" Text="In" OnClick="Add" CommandName="EmptyDataTemplate" Class="Button" OnClientClick="return confirm('You are about to confirm this action. Please confirm this action by clicking OK. If you do not wish to do this, please select Cancel.');" />
<br />
<asp:Button runat="server" ID="btInsertOut" Text="Out" OnClick="AddOut" CommandName="EmptyDataTemplate" Class="Button" OnClientClick="return confirm('You are about to confirm this action. Please confirm this action by clicking OK. If you do not wish to do this, please select Cancel.');" />
</td>
<td>
<asp:TextBox runat="server" ID="tb_Serial_Number" CssClass="text"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="tb_comments" Width="100%" MaxLength="50" runat="server" placeholder="max 50 characters"/>
</td>
<td>
<asp:TextBox ID="tb_reviewDate" runat="server" DataFormatString="{0:dd/mm/yyyy}" Text='<%#Eval("review_by") %>'></asp:TextBox>
</td>
<td><asp:DropDownList ID="tb_approved_by" runat="server">
</asp:DropDownList> </td>
</tr>
</div>
</EmptyDataTemplate>
After trial and error, I found that programatically adding a header row in C# did the trick. Probably not the best way of doing it, but it worked.
Code is as follows:
#region show the emptyDataTemplate depending on user rights
Control control = null;
control = GridView1.Controls[0].Controls[0];
if (userManagement.getMIFReadWriteAccess() == "Read")
{
control.Visible = false;
GridViewRow HeaderRow = new GridViewRow(1, 0, DataControlRowType.Header, DataControlRowState.Insert);
TableCell HeaderCell2 = new TableCell();
HeaderCell2.Text = "Country";
HeaderCell2.ColumnSpan = 1;
HeaderRow.Cells.Add(HeaderCell2);
//Repeat the above for every column of data you have!
GridView1.Controls[0].Controls.AddAt(0, HeaderRow);

asp.net ajax like reorder list

I'm trying to create a draggable list to change the order some pictures are displayed in a product page. I wan't to be able to do this in the product edit page (same place where I add the pics and their description). So, when creating I have nothing inserted on the database and since the AJAX toolkit reorderlist only works with a datasource I was specifying the list as the source of the reorderlist and calling the databind method. In the item template of the reorder list I have a textbox to edit the pic description and a img that displays the photo. I can drag the items and the list gets reordered, however when I click save I can't get the updated text on the textbox and the order property on the picture doesn't get updated. I've tried manually getting the items in the reorderlist but they're always null even though the list shows 20 items the DataItem is empty. I've enabled viewstate and didn't help either.
Here's my code:
<ajaxToolkit:ReorderList ID="rdlPhotos" runat="server" SortOrderField="PhotoOrder" AllowReorder="true" PostBackOnReorder="true" ClientIDMode="AutoID" EnableViewState="true" ViewStateMode="Enabled">
<ItemTemplate>
<div>
<%--<eva:PhotoView ID="iPV" runat="server" Photo='<%# Container.DataItem %>' />--%>
<asp:Image ID="imgPhoto" runat="server" ImageUrl='<%# string.Format("http://eva-atelier.net/sparkle{0}", Eval("Path").ToString().Substring(1)) %>' Width="150" Height="150" />
<div class="formGrid">
<label class="formLabel">Title</label>
<asp:TextBox ID="txtTitle" runat="server" Text='<%#Bind("FileTitle") %>' />
<br />
<label class="formLabel">Description</label>
<asp:TextBox ID="txtDescription" runat="server" Text='<%#Bind("FileDescription") %>' />
<br />
</div>
<p>
<asp:Button ID="btnRemove" runat="server" Text="Remover" />
</p>
</div>
</ItemTemplate>
<ReorderTemplate>
<asp:Panel ID="pnlReorder" runat="server" />
</ReorderTemplate>
<DragHandleTemplate>
<div style="width:20px;height:20px;background-color:Red"></div>
</DragHandleTemplate>
</ajaxToolkit:ReorderList>
And below the C# code:
private void AddPhotosView()
{
if (_currentProduct.Photos != null && _currentProduct.Photos.Count > 0)
{
rdlPhotos.DataSource = _currentProduct.Photos;
rdlPhotos.DataBind();
}
}
I'm new to Asp.net I come from a large WPF background, sorry if I'm making basic question :)
Thanks
For updating order of ReorderList items add your handler for it's OnItemReorder event. In this case your handler may looks like this:
protected void ReorderHandler(object sender, ReorderListItemReorderEventArgs e)
{
var movedPhoto = _currentProduct.Photos[e.OldIndex];
_currentProduct.Photos.RemoveAt(e.OldIndex);
_currentProduct.Photos.Insert(e.NewIndex, movedPhoto);
_currentProduct.Photos.Save();
}
For updating FileTitle and FileDescription of single Photo it is easy to use OnUpdateCommand event of ReorderList and a button with attribute CommandName="Update" for each Photo.
And for updating all Photos at once just iterate through rdlPhotos.Items in next manner:
protected void SaveAllHandler(object sender, EventArgs e)
{
foreach (var riItem in rdlPhotos.Items)
{
var id = ((HiddenField)riItem.FindControl("itemID")).Value;
var title = ((TextBox)riItem.FindControl("txtTitle")).Text;
var description = ((TextBox)riItem.FindControl("txtDescription")).Text;
UpdatePhoto(id, title, description);
}
}
Remember that rdlPhotos.Items here are in initial order. And for identifying which Photo should be updated add hidden field with Photo.ID-value to ReorderList's ItemTemplate like this:
<asp:HiddenField runat="server" ID="itemID" Value='<%# Eval("ID") %>' />

ASP:Labels not updating on button Click

I know this is probably something so simple that I am just not able to see it. I have an aspx form that has a usercontrol in an updata panel. The user control is a people picker the searches on users from a corporate database.
What I want to see happen is:
The user clicks on a pick user button
The update panel with people picker becomes visible
They search for a user and then select the one they want.
When they make the selection and click Done, I get the user id of the user and look them up in our user table.
The user information should show up in a the form in label fields.
I can step through the code and see that I am getting the user information and that the label text is being set to the values but the page never updates the labels. It is a postback so I would think they would update.
<tr>
<td colspan="4">
<asp:UpdatePanel ID="CollapseDelegate" runat="server">
<ContentTemplate>
<asp:Panel ID="pDelegateHeader" runat="server">
<div style="padding: 10px 0 10px 20px; height:10px; text-align: left; background-color:#ffffff; color:#000000; border: 2px solid #ccc;" >
<asp:Label ID="ShowDelegate" runat="server" /><br />
</div>
</asp:Panel>
<asp:Panel ID="pDelegateBody" runat="server">
<PP:PeoplePicker ID="PP" runat="server" />
<asp:Button ID="btnOk" runat="server" Text="Done" CssClass="Buttons" onclick="btnOk_Click" />
</asp:Panel>
<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender3" runat="server" TargetControlID="pDelegateBody" CollapseControlID="pDelegateHeader" ExpandControlID="pDelegateHeader" Collapsed="true" TextLabelID="ShowDelegate" CollapsedText="Pick User..." ExpandedText="Close..." CollapsedSize="0"></asp:CollapsiblePanelExtender>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td><asp:Label ID="DelegateNameLabel" runat="server" Text="Name:" CssClass="indentedText" /></td>
<td><asp:Label ID="DelegateNameValueLabel" runat="server" CssClass="indentedText" Visible="true"></asp:Label></td>
<td><asp:Label ID="DelegateEmailLabel" runat="server" Text="Email:" CssClass="indentedText" /></td>
<td><asp:Label ID="DelegateEmailValueLabel" runat="server" CssClass="indentedText" Visible="true"></asp:Label></td>
</tr>
<tr>
<td><asp:Label ID="DelegatePhoneLabel" runat="server" Text="Phone:" CssClass="indentedText" /></td>
<td><asp:Label ID="DelegatePhoneValueLabel" runat="server" CssClass="indentedText" Visible="true"></asp:Label></td>
<td><asp:Label ID="DelegateVerifiedLabel" runat="server" Text="Last Verified Date:" CssClass="indentedText" /></td>
<td><asp:Label ID="DelegateVerifiedValueLabel" runat="server" CssClass="indentedText" /></td>
</tr>
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
string PassedDelegateID = string.Empty;
string Mode = string.Empty;
int delegateId = 0;
if (Request.QueryString["Id"] != null)
{
PassedDelegateID = Request.QueryString["Id"].ToString();
}
else
{
PassedDelegateID = "0";
}
if (Request.QueryString["mode"] != null)
{
Mode = Request.QueryString["mode"].ToString();
}
else
{
Mode = "add";
}
if (Mode == "add")
{
pnlUdpateDelegateText.Text = UIConstants.ADDDELEGATETEXT.ToString();
}
else
{
pnlUdpateDelegateText.Text = UIConstants.UPDATEDELEGATETEXT.ToString();
if (int.TryParse(PassedDelegateID, out delegateId))
{
loadDelegateData(delegateId);
}
}
}
}
protected void btnOk_Click(object sender, EventArgs e)
{
TextBox txtSearchValue = (TextBox)PP.FindControl("txtSearchResults");
string LanId = txtSearchValue.Text;
User user = BusinessUtility.GetUser(LanId);
DelegateNameValueLabel.Text = user.Name;
DelegateEmailValueLabel.Text = user.Email;
DelegatePhoneValueLabel.Text = user.Phone;
DelegateVerifiedValueLabel.Text = DateTime.Now.ToShortDateString();
}
Thanks,
Rhonda
Because the labels are outside the update panel, only the content inside the update panel is updated from an ajax post-back, that's the whole point of an update panel.
You will need to either move the labels inside the update panel's content area, or have another update panel for the labels and make it's update mode "always"
Your lables are outside of the UpdatePanel.
Under the hood, ASP.Net performes a full postback, but only the part that pertains to your UpdatePanel is transfered back down to the client. Some JavaScript then takes this bit of HTML and replaces the existing <div> element that is your UpdatePanel.
Since your labels are outside of that <div> they never get updates.

Change the source of image by clicking thumbnail using updatePanel

For example, i have this ImageViewer.ascx UserControl:
<div class="ImageTumbnails">
<asp:ListView ID="ImageList" runat="server" ItemPlaceholderID="ItemContainer">
<LayoutTemplate>
<asp:PlaceHolder ID="ItemContainer" runat="server" />
</LayoutTemplate>
<ItemTemplate>
<asp:HyperLink runat="server"
NavigateUrl='<%# Link.ToProductImage(Eval("ImageFile").ToString())%>'>
<asp:Image runat="server" ImageUrl='<%# Link.ToThumbnail(Eval("ImageFile").ToString()) %>' />
</asp:HyperLink>
</ItemTemplate>
</asp:ListView>
</div>
<div class="ImageBig">
<asp:Image ID="ProductImageBig" runat="server" ImageUrl="" />
</div>
When the thumbnail is clicked it will change the source of ProductImageBig with its hyperlink target.
How can i achieve this using UpdatePanel ? ( Or will i be able to )
You are currently using a HyperLink control which will direct the user to the value of the NavigateUrl property. If it goes to a separate page, how will it modify the URL of the ProductImageBig control?
One option is to change the HyperLink control to a ImageButton and then specify a method in your codebehind for the "OnCommand" property.
In the code behind, you can cast the sender object to a the ImageButton, retrieve its ImageURL, and then set the URL of your ProductImageBig
public void DisplayPhoto(object sender, CommandEventArgs args)
{
ProductImageBig.NavigateUrl = ((ImageButton)sender).ImageUrl;
updatePanel.Update();
}
If you have the entire markup surrounded in an UpdatePanel named "updatePanel" and you have the properties set correctly, you can then update it after setting the Url.

Resources