asp.net mvc working with ajax

提交内容后更新

action:

public ActionResult Index()
        {
            return View(_entities.GuestSet.ToList());
        }

        // POST: /GuestBook/Create

        public ActionResult Create(Guest guestToCreate)
        {
            _entities.AddToGuestSet(guestToCreate);
            _entities.SaveChanges();

            return PartialView("Guests", _entities.GuestSet.ToList());
        }

view:

<script src="http://www.cnblogs.com/Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>

    <h1>Guest Book</h1>

    <% using (Ajax.BeginForm("Create", new AjaxOptions {UpdateTargetId="divMessages" }))
       { %>
    
        <label for="Name">Your Name:</label>
        <br /><%= Html.TextBox("Name")%>
        
        <br /><br />
        
        <label for="Message">Message:</label>
        <br /><%= Html.TextArea("Message")%>
    
        <br /><br />
        
        <input type="submit" value="Add Message" />
    
    <% } %>

    <div id="divMessages">
        <% Html.RenderPartial("Guests"); %>
    </div>

<% foreach (var item in Model) { %>
    <div>
        <h3><%= Html.Encode(item.Name) %></h3>
        
        <%= Html.Encode(item.Message) %>
    </div>
<% } %>

异步提交

action:

public ActionResult Index()
        {
            return View(_entities.MovieSet.ToList());
        }

        // GET: /Movie/Create

        public ActionResult Create()
        {
            return View();
        }

        // POST: /Movie/Create

        [AcceptVerbs(HttpVerbs.Post)]
        public string Create(Movie movieToCreate)
        {
            try
            {
                _entities.AddToMovieSet(movieToCreate);
                _entities.SaveChanges();
                return "Inserted new movie " + movieToCreate.Title;
            }
            catch
            {
                return "Could not insert movie " + movieToCreate.Title;
            }
        }

view:

create

<script src="http://www.cnblogs.com/Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>

    <script type="text/javascript">

        function createSuccess(context)
        {
            alert( context.get_data());
        }
    
    </script>


    <%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %>

    <% using (Ajax.BeginForm(new AjaxOptions {OnSuccess="createSuccess"}))
       {%>

        <fieldset>
            <legend>Create Movie</legend>
            <p>
                <label for="Title">Title:</label>
                <%= Html.TextBox("Title")%>
                <%= Html.ValidationMessage("Title", "*")%>
            </p>
            <p>
                <label for="Director">Director:</label>
                <%= Html.TextBox("Director")%>
                <%= Html.ValidationMessage("Director", "*")%>
            </p>
            <p>
                <label for="DateReleased">DateReleased:</label>
                <%= Html.TextBox("DateReleased")%>
                <%= Html.ValidationMessage("DateReleased", "*")%>
            </p>
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>

    <% } %>

    <div>
        <%=Html.ActionLink("Back to List", "Index") %>
    </div>

显示进度条

action:

[AcceptVerbs(HttpVerbs.Post)]
        public string Create(Movie movieToCreate)
        {
            Thread.Sleep(5 * 1000);
            try
            {
                _entities.AddToMovieSet(movieToCreate);
                _entities.SaveChanges();
                return "Inserted new movie " + movieToCreate.Title;
            }
            catch
            {
                return "Could not insert movie " + movieToCreate.Title;
            }
        }

view:

<script src="http://www.cnblogs.com/Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
    <script src="http://www.cnblogs.com/Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>

    <script type="text/javascript">

        function createSuccess(context)
        {
            alert( context.get_data());
        }
    
    </script>

    <div id="divLoading" style="display:none">
        <image src="../Content/Busy.gif" alt="posting form" />    
    </div>

    <%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %>

    <% using (Ajax.BeginForm(new AjaxOptions {OnSuccess="createSuccess", LoadingElementId="divLoading"}))
       {%>

        <fieldset>
            <legend>Create Movie</legend>
            <p>
                <label for="Title">Title:</label>
                <%= Html.TextBox("Title")%>
                <%= Html.ValidationMessage("Title", "*")%>
            </p>
            <p>
                <label for="Director">Director:</label>
                <%= Html.TextBox("Director")%>
                <%= Html.ValidationMessage("Director", "*")%>
            </p>
            <p>
                <label for="DateReleased">DateReleased:</label>
                <%= Html.TextBox("DateReleased")%>
                <%= Html.ValidationMessage("DateReleased", "*")%>
            </p>
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>

    <% } %>

    <div>
        <%=Html.ActionLink("Back to List", "Index") %>
    </div>

异步检索内容

action:

public ActionResult Index()
        {
            return View(_entities.CategorySet.ToList());
        }


        public ActionResult Details(int id)
        {
            var products = from p in _entities.ProductSet
                           where p.CategoryId == id
                           select p;
            return PartialView("Details", products);
        }

view:

<script src="http://www.cnblogs.com/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/Scripts/MicrosoftAjax.debug.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/Scripts/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>

<script type="text/javascript">

    $(pageReady);

    function pageReady()
    {
        $("#categories a").click( selectLink );
    }

    function selectLink()
    {
        $("#categories a.selected").removeClass("selected");
        $(this).addClass("selected");
    }
    

</script>

<ul id="categories" style="display:inline">
<% foreach (var category in Model)
   { %>

    <li style="display:inline">
        <%= Ajax.ActionLink(category.Name, "Details", new {id=category.Id}, new AjaxOptions {UpdateTargetId="divDetails"}) %>
    </li>

<% } %>
</ul>

<hr />

<div id="divDetails"></div>

异步删除

action:

[AcceptVerbs(HttpVerbs.Delete)]//ajax
        public ActionResult Delete(int id)
        {
            var movieToDelete = (from m in _entities.MovieSet
                                 where m.Id == id
                                 select m).FirstOrDefault();
            _entities.DeleteObject(movieToDelete);
            _entities.SaveChanges();
            return PartialView("Movies", _entities.MovieSet.ToList());
        }

        [ActionName("Delete")]
        public ActionResult Delete_GET(int id)
        {
            var movieToDelete = (from m in _entities.MovieSet
                                 where m.Id == id
                                 select m).FirstOrDefault();
            return View(movieToDelete);
        }

        [AcceptVerbs(HttpVerbs.Post)]
        [ActionName("Delete")]
        public ActionResult Delete_POST(int id)
        {
            var movieToDelete = (from m in _entities.MovieSet
                                 where m.Id == id
                                 select m).FirstOrDefault();
            _entities.DeleteObject(movieToDelete);
            _entities.SaveChanges();
            return RedirectToAction("Index");
        }

view:

<ul>
    <% foreach (var movie in Model)
       { %>
    
        <li>
            <%= movie.Title %>
            <%= Ajax.ActionLink("Delete", "Delete", new {id=movie.Id}, new AjaxOptions {HttpMethod="DELETE", Confirm="Delete record?", UpdateTargetId="divMovies" })%>
        </li>
    
    <% } %>

</ul>

Using the AcceptAjax Attribute

attribute:

public sealed class AcceptAjaxAttribute : ActionMethodSelectorAttribute
{
public override bool IsValidForRequest(ControllerContext
➥controllerContext, MethodInfo methodInfo)
{
if (controllerContext == null)
{
throw new ArgumentNullException(“controllerContext”);
}
return controllerContext.HttpContext.Request.IsAjaxRequest();
}
}

controller:

public class SelectorController : Controller
{
private ProductsDBEntities _entities = new ProductsDBEntities();
public ActionResult Index()
{
var categories = _entities.CategorySet.ToList();
var products = new List<Product>();
return View(new ProductsVDM(categories, products));
}
[AcceptAjax]
[ActionName(“Details”)]
public ActionResult Details_Uplevel(int id)
{
var products = from p in _entities.ProductSet
where p.CategoryId == id
select p;
return PartialView(“Details”, products);
}
[ActionName(“Details”)]
public ActionResult Details_Downlevel(int id)
{
var categories = _entities.CategorySet.ToList();
var products = from p in _entities.ProductSet
where p.CategoryId == id
select p;
return View(“Index”, new ProductsVDM(categories, products));
}
}