Thursday, January 9, 2014

c# MVC on page edit (basic) for CMS sites

I was trying to create a CMS project there user will edit content and save if he is admin, and this save option and text box will appear on the page itself without going to admin section separately. This is a demo to do that you can consider this as first step.



my class [consider cms page's place holder id and content]:
namespace Implementation.Models
{
    public class PageContent
    {
        public string Content { get; set; }
        public int PlaceID { get; set; }
    }
}

my controller [ for index page]
namespace Implementation.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.Message = "Welcome to ASP.NET MVC!";

            PageContent pc1 = new PageContent { Content = "ssss", PlaceID = 1 };
            PageContent pc2 = new PageContent { Content = "qqqq", PlaceID = 2 };

            List<PageContent> lstpc = new List<PageContent>();
            lstpc.Add(pc1);
            lstpc.Add(pc2);

            ViewBag.isAdmin = true;

            return View(lstpc);
        }

        [HttpPost]
        public ActionResult Index(List<PageContent> lstpc)
        {
            ViewBag.isAdmin = true;

            return View(lstpc);
        }

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

my index view:
@model List<Implementation.Models.PageContent>
@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>

@using (Html.BeginForm())
{
    <div clss="parentContainer">
    @for (int i = 0; i < Model.Count; i++)
    {
    <div id="parentRow">
        @if (Convert.ToBoolean(ViewBag.isAdmin))
        {
            <div id='div_@(i)' style="display:none" class="editor">
                @Html.EditorFor(item => Model[i], "contentPage")
            </div>
        }

        <div class="dispay">
            @Html.DisplayFor(item => Model[i], "contentPage")
        </div>
        @if (Convert.ToBoolean(ViewBag.isAdmin))
        {
            <input type="button" id='btn_@(i)' value="Edit" onclick="OpenDiv(this)" />
        }
    </div>
        }
    </div>
   
    <input type="submit" value="save" />
}

<script type="text/javascript">
    function OpenDiv(obj) {

        $(obj).parent().parent().find('.editor').hide();       
        $(obj).parent().parent().find('.dispay').show();

        $(obj).parent().find('.editor').show();
        $(obj).parent().find('.dispay').hide();
    }
</script>

my display template [created under shared/DisplayTemplates folder -contentPage.cshtml]
@model Implementation.Models.PageContent
<div class="test">
    @Html.DisplayFor(model => model.Content)
    @Html.HiddenFor(model => model.PlaceID)
</div>

my editor template [created under shared/EditorTemplates folder -contentPage.cshtml]
@model Implementation.Models.PageContent
<div class="ksdks">
   @Html.TextBoxFor(model => model.Content)
   @Html.HiddenFor(model => model.PlaceID)
</div>

No comments:

Post a Comment