در این مقاله تصمیم دایم نحوه ایجاد یک سیستم امتیاز دهی به محصولات رابدون استفاده از کامپوننت بررسی کنیم .

ابتدا یک پروژه جدید ایجاد میکنیم

سپس یک مدل با نام Product برای ساخت اطلاعات پیشفرض ایجاد میکنیم

    public class Product
    {
        public Product()
        {
            this.Rate = this.Id = 0;
            this.Name = this.Description = "";
        }
        public int Id { get; set; }
        public int Rate { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
    }

یک کنترلر با نام Home ایجاد میکنیم و در اکشن Index آن اطلاعات پیشرفض را پر کرده و به View ارسال میکنیم

     public ActionResult Index()
        {
            var model = new List<Product>();
            model.Add(new Product() { Id = 122, Name = "کفش ورزشی", Description = "این کفش در 3 رنگ متنوع می باشد" });
            model.Add(new Product() { Id = 132, Name = "ویژوال استادیو 2015", Description = "این ابزار بسیار قدرتمند است" });
            model.Add(new Product() { Id = 142, Name = "مانیتور سامسونگ", Description = "مانیتور در ابعاد 22 و 24 اینچ موجود است" });
            model.Add(new Product() { Id = 152, Name = "آب آناناس", Description = "پر از مواد مفید برای بدن میباشد" });
            model.Add(new Product() { Id = 162, Name = "آب نارگیل", Description = "پر از مواد مفید برای بدن میباشد" });

            return View(model);
        }

برای ثبت و نمایش امتیاز یک PartialView با نام _Rating در Shared ایجاد میکنیم .

@model SO14014091.Models.Product

<h3>@Model.Name <small>@Model.Description</small></h3>

<div class="ratting-item" data-pid="@Model.Id">
    <input class="rating" name="vote" type="radio" value="1" />
    <input class="rating" name="vote" type="radio" value="2" />
    <input class="rating" name="vote" type="radio" value="3" />
    <input class="rating" name="vote" type="radio" value="4" />
    <input class="rating" name="vote" type="radio" value="5" />
</div>
<span class="result"></span>

در ویو Index برای استفاده از امتیاز و نمایش آنها تصمیم داریم از Jquery استفاده کنیم

            $('.ratting-item').rating(function (vote, event) {
                var anchor = $(event.currentTarget),
                    pid = anchor.closest(".ratting-item").data("pid"),
                    url = '@Url.Action("RateProduct", "Services")';

                // show message while doing the database round trip
                $('.ratting-item[data-pid=' + pid + ']')
                    .next()
                    .text("در حال ثبت امتیاز ...");

                $.ajax({
                    url: url,
                    type: "GET",
                    data: { rate: vote, id: pid },
                    success: function (data) {

                        if (data.success) {
                            // all went well, here you can say Thank you
                            $('.ratting-item[data-pid=' + data.pid + ']')
                                .next()
                                .text("امتیاز ثبت شد -  کد محصول : " + data.pid );
                        }
                        else {
                            // There must be an Exception error, let's show it
                            $('.ratting-item[data-pid=' + data.pid + ']')
                                .next()
                                .text("اشتباهی رخ داده است");
                        }
                    },
                    error: function (err) {
                        // the call thrown an error
                        $('.result').text(err);
                    },
                    complete: function () {
                        //$(".loading").hide();
                    }
                });
            });

سپس ویو Index را کامل میکنیم و محصولات رو به همراه قسمت امتیاز دهی توسط یک حلقه Foreach نمایش میدهیم

<div class="tab-content">
    <div class="tab-pane active" id="single">
        <h2>امتیاز </h2>

        @Html.Partial("_Rating", Model.FirstOrDefault())
    </div>
    <div class="tab-pane" id="multiple">
        <h2>امتیاز محصولات</h2>

        @foreach (var p in Model)
        { 
            @Html.Partial("_Rating", p)
        }
    </div>
</div>

خروجی کار به شکل زیر است :