Fasil Hayat's blog

...C#, .Net, Sharepoint, BizTalk, JQuery...

Et eksempel på hvordan man fra codebehind kan registrere klientside script. Som man kan se på eksemplet kan man sagtens registrere JQuery scripts.

   1:  protected void RegisterClientsideScript() {
   2:      const string csName = "JQueryScript";
   3:      var csType = GetType();
   4:      var cs = Page.ClientScript;
   5:      if (!cs.IsClientScriptBlockRegistered(csType, csName)) {
   6:          var csText = new StringBuilder();
   7:          csText.Append("<script type=\"text/javascript\">");
   8:          csText.Append("$(function () { alert('Hello world'); }););");
   9:          csText.Append("</script>");
  10:          cs.RegisterClientScriptBlock(csType, csName, csText.ToString());
  11:      }  
  12:  }


For nyligt har jeg haft behov for at vise en bekræftelses boks inden en web formular blev sendt. Frem for at bruge den kedelige javascript confirm box (onsubmit="return confirm('Vil du gå videre?');") på form tagget, har jeg lavet dette lille eksempel med JQuery og JQuery UI.
JQuery er et JavaScript bibliotek, der giver imponerende klientside programmerings muligheder med et hav af effekter. Der findes en masse JQuery plugins, der kan pifte et kedeligt site op.
JQuery kan hentes her og JQuery UI kan hentes her.

Følgende eksempel viser en 'confirm box' dannet vha. JQuery og ved klik på 'Accept' bliver web formularen submittet.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery UI Dialog </title>
		<link rel="stylesheet" href="/themes/base/jquery.ui.all.css">
		<script src="/jquery-1.6.2.js"></script>
		<script src="/external/jquery.bgiframe-2.1.2.js"></script>
		<script src="/ui/jquery.ui.core.js"></script>
		<script src="/ui/jquery.ui.widget.js"></script>
		<script src="/ui/jquery.ui.mouse.js"></script>
		<script src="/ui/jquery.ui.button.js"></script>
		<script src="/ui/jquery.ui.draggable.js"></script>
		<script src="/ui/jquery.ui.position.js"></script>
		<script src="/ui/jquery.ui.dialog.js"></script>
		<link rel="stylesheet" href="../demos.css">
		<script>
		$(function() {
			var minForm;
			$('#dialog-confirm').dialog({
				resizable: false,
				autoOpen: false,
				height:140,
				modal: true,
				buttons: {
					'Accept': function() {
						minForm.submit();
					},
					'Fortryd': function() {
						$(this).dialog('close');
					}
				}
			});
			$('#MinForm').submit(function(){
				minForm = this;
				$('#dialog-confirm').dialog('open');
				return false;
			});
		});
		</script>
	</head>
	<body>
		<form id="MinForm" name="MinForm" action="http://www.fasil.dk" method="post" target="_self">
			<div class="demo">
				<div id="dialog-confirm" title="Gå videre?">
					<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>
					Er du sikker på dit valg?</p>
			</div>
			<input type="submit" name="mysumitbtn" id="mysumitbtn" value="send" />
		</form>
	</body>
</html>


Der er ikke mange, der er klar over man sagtens kan få en WCF service til at respondere i JSON formatet. Dette har jeg typisk brugt i AJAX sammenhænge, hvor man kan undlade at bruge en *.aspx side, og i stedet benytte sig af en WCF service på UI laget, der asynkront kan kaldes fra fx. JQuery. Denne WCF service er udelukkende designet til at understøtte asynkrone kald. De metoder man fx. fra JQuery kalder består af nedenstående kontrakt definitioner.
Navnet på WCF service er i dette eksempel 'Service.svc'.

   1:  [ServiceContract(Namespace = "SilverAria.SAM.Service")]
   2:  [ServiceBehavior(InstanceContextMode = InstanceContextMode.PerCall)]
   3:  [AspNetCompatibilityRequirements(RequirementsMode=
   4:  AspNetCompatibilityRequirementsMode.Allowed)]
   5:  public class Service {
   6:    [OperationContract]
   7:    [WebGet(ResponseFormat=WebMessageFormat.Json, BodyStyle=
   8:  WebMessageBodyStyle.Bare)]
   9:    public Role GetConfiguredSkills(int roleId) {          
  10:       var control = new RenwarRoleConfigurationControl();
  11:       var role = control.PopulateConfiguredSkills(roleId);
  12:       var returnObj = new Role {
  13:           ConfiguredSkills = role.ConfiguredSkills,
  14:           UnconfiguredSkills = role.UnconfiguredSkills
  15:       };
  16:       return returnObj;
  17:    }
  18:  }


I JQuery vil kaldet af metoden se ud på følgende måde:

   1:  $(document).ready(function() {
   2:      $("#roleId").change(function() {
   3:          $("#requiredSkills").empty();
   4:          $("#skills").empty();
   5:          var idValue = $("#roleId").val();
   6:          $.getJSON("Service.svc/GetConfiguredSkills", { roleId: idValue },
   7:          function(data) {
   8:              $.each(data.ConfiguredSkills, function(i, 
   9:                  ConfiguredSkills) {
  10:                  $("<option>" + ConfiguredSkills.Name + ", Lvl " +
  11:                  ConfiguredSkills.Level + "</option>").attr("value",
  12:                  ConfiguredSkills.Id + "#" +
  13:                  ConfiguredSkills.Level).appendTo("#requiredSkills");
  14:              });
  15:              $.each(data.UnconfiguredSkills, 
  16:                function(a, UnconfiguredSkills) {
  17:                  $("<option>" + UnconfiguredSkills.Name + 
  18:                  "</option>").attr("value",
  19:                  UnconfiguredSkills.Id).appendTo("#skills");
  20:              });
  21:          });
  22:          return false;
  23:      });
  24:  });


WCF kaldet leverer data i JSON format, som man så ved hjælp af JQuery 'pakker' ud, og beriger html kontrollerne med. Meget mere elegant løsning istedet for at have en 'dummy' *.aspx side, der reagerer på querystring værdier.



Fasil Malik Hayat

Developer
.Net, WCF, Sharepoint, MOSS, Biztalk, JQuery.

linkedin facebook twitter plaxo google+ grooveshark boxee
fasil

Education

fasil

Bachelor of Science (Honours)
De Montfort University, Leicester.

Fag: Java, MVC, Information Strategy, ITIL

Microsoft Certified Technology Specialist

Skills

.net vs2010 - C# sharepoint sql server jquery ubuntu java netbeans


  

Sign in