MVC 5, Razor - How to create Edit Template for one property in model

Question

I have a question that feels like it should be easy to answer, but I am not sure where to go with it.

I have several cshtml pages that take different models. But, each of these models has a common property, called WebSiteSK, and the same razor and Kendo UI code that handles that property in each cshtml file. What I want to do is extract this common razor and Kendo UI into an EditerTemplate.

So, I have one cshtml page that takes a Model, which I'll call ModelA. Then, another that takes another model, called ModelB. Both ModelA and ModelB have an integer property called WebSiteSK, which the code that I want extract into an editor template receives.

Here is the code that I want to centralize in an editor template:

<script type="text/x-kendo-tmpl" id="site-droplist-template">
    <span>#: data.WebSiteSK # - </span>
    <span><b>#: data.SiteName # </b> - </span>
    <span>#: data.EnvironmentNK #</span>
    <br />
    <span>#: data.SiteUrl #</span>
</script>

<div>
    @Html.LabelFor(model => model.WebSiteSK, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @(Html.Kendo().DropDownList()
                .Name("WebSiteSK_Target")
                .DataTextField("SiteName")
                .DataValueField("WebSiteSK")
                .DataSource(d => d.Read("GetWebSiteList", "Site"))
                .Height(300)
                .TemplateId("site-droplist-template")
                .Filter("contains")
                .OptionLabel("Select a site")
                .Events(d =>
                    {
                        d.DataBound("onSiteBound");
                        d.Change("onSiteChange");
                    })
                )
        @Html.ValidationMessageFor(model => model.WebSiteSK, string.Empty, new { @class = "text-danger" })
    </div>
</div>

Does that make sense? Can anyone help me do this?

Answer 1

You can create a base class that contains only the property 'WebSiteSK'. All models that have have this property then should inherit from this base class. Then you can create a partial view '_WebSiteSK' with the code that you want to reuse.

Your models:

public class MyModel : WebSiteSKBaseClass

The partial view must be typed with the base class

@model MyProject.Models.WebSiteSKBaseClass

Finally you can replace the replicated code in all views with:

@Html.Partial("_WebSiteSK")