Link to home
Start Free TrialLog in
Avatar of mikha
mikhaFlag for United States of America

asked on

customize calendar control in ajax toolkit

I have calendar control from  ASP.NET AJAX Control Toolkit .
I am trying to customize the background color , and other css properties of the calendar.

Is there any other library or widget , I can use instead of the one from AJAX control toolkit, which is easy to integrate with asp.net and also easy to customize.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Which version of bootstrap are you using
Bootstrap 4 the modal guide is here http://getbootstrap.com/docs/4.1/components/modal/

For Bootstrap 3 the modal guide is here https://getbootstrap.com/docs/3.3/javascript/#modals

In both cases you can setup a Modal with HTML (you must include the Bootstrap JS file) - and link the opening of that modal to buttons using classes and data attributes.

In Bootstap 3 - this example shows you how to do this https://getbootstrap.com/docs/3.3/javascript/#live-demo

In Bootstrap 4 this example shows you how to do this http://getbootstrap.com/docs/4.1/components/modal/#live-demo

Footnote:
You can't call html elements from server side code. Server code runs, renders out HTML (which is sent to the browser) and then that process dies - long before the page is rendered by the browser.

To interact with the page you use JavaScript (which can communicate with the server through AJAX).

You can "hack" a solution that "appears" to call something in the page by outputting JavaScript as part of the page that runs on document load and does whatever action you require.
Avatar of mikha

ASKER

@ Julian Hansen - thanks .

I think you posted answer to my other question here.

I looked at the links you have provided. but I wanted to know how to do set it up using asp.net.

say, I have a asp.net site ( not MVC).

I have created a couple of pages to list items from a database. from any of these aspx pages, the list of the items has a hyperlink on each row,  which when clicked, I want to show the bootstrap Modal and present the details of that item on the list.

since, this modal needs to accessible or from any page when user clicks on the details link , I need to open another page
let's call that AdditionalInfo.aspx page. right now, I can do a window.open and open this page in the new window, but i want to make it
a Modal. I pass in an id to this AdditionaInfo.aspx page and based on that ID , i display details of that record.

Now if i want to open this page into a Modal,
where should the mark/upcode for Modal go, do I create a new aspx page which  will have the markup for the Modal?
where would the Jquery code  go like show in the links, to pass the url of this page and open it in the modal?
can i use the same modal and jquery code, to open other pages in this modal?
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of mikha

ASKER

@Julian - thanks again for your comment. I have done a search to find something similar examples, but I still don't have a full understanding.

If you could provide some code sample, even just to get me started that would really help me to learn more.

1. In my asp.net website. I created a Modal on the page, as a template. As I have mentioned earlier, I already have the details.aspx page, which I want to open in a Modal. so now, do I copy the markup of  details.aspx page into the modal content?

2. I have another additionalInfo.aspx page that I want to open in a Modal page. so my understanding is I create another Modal template for this.

3.  right now, I have already making an ajax call to a function when save button is clicked. this is for keeping log. so now i need to make that call first and then open the aspx page in the Modal. how do i do that , right now my ajax call is below.
$.ajax ({
              type: post,
               data : data,
               url : "log.ashx',
               success : function (data)
               {
                             //on success , i need to open the content of details page in the bootstrap Modal
                }


});
Avatar of mikha

ASKER

@Julian - one more question, regarding the Modal.

as Modal is just a div in the same aspx page, all the submit or cancel button in the Modal should also be handled or the code should be in the cs page of the aspx page that generates the Model right?

so for example,

Main page - index .aspx,
i create a template here for the my Modal. modal as submit/save button.
code to handle this button event should be in index.aspx.cs page .
It depends by what you mean by handle.

The code that handles the modal events lives in the HTML page as JavaScript code - this may then result in an AJAX callback to your server that then handles the event server side and sends back a response.

I don't think a postback is a good idea for modals - so you should be looking at an AJAX callback - in which case where your server side code lives (that handles the request) is really up to you - it could be in a controller - or a service for example - it depends entirely on your implementation.
Avatar of mikha

ASKER

@thanks Julian. I will close this question .

I do have further question on how to best implement it in an app website. I will open up a new question for that.

Thank you for your insights.
You are welcome.