Part 1: Attach file to Web Part using module feature

Step 1: Open visual studio 2010 | New | Project | Empty Sharepoint Project , project name is: ApplyCssUseModuleFeartureSanbox

Step 2: Choose deploy sanbox solution

Step 3: Add new Item

Step 4: Choose Module, name is CallFileCssOrScript

Step 5: View UI below

Step 6: Rename Sample.txt file to Sample.css

Step 7: Copy  code  Url="_catalogs/masterpage" RootWebOnly="TRUE" List="116" and paste to here

Step 8: Delete Url  CallFileCssOrScript\ 

Step 9: Copy  Type="GhostableInLibrary" IgnoreIfAlreadyExists="TRUE" and paste to here

Step 10: Open file Sample.css and delete content

Step 11: Paste code below to content of file Sample.css

.tableRow

{

    background-color:Orange;

    color:Red;

}

Step 12: Add new Item | Web Part | name is ApplyCssUseModuleFeartureSanbox

Step 13: Write code  CreateChildControls

using System;

using System.ComponentModel;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using Microsoft.SharePoint;

using Microsoft.SharePoint.WebControls;

namespace ApplyCssUseModuleFeartureSanbox.ApplyCssUseModuleFeartureSanbox

{

    [ToolboxItemAttribute(false)]

    public class ApplyCssUseModuleFeartureSanbox : WebPart

    {

        protected override void CreateChildControls()

        {

            //Create new table object

            Table table = new Table();

            table.GridLines = GridLines.Both;

            //The first row

            TableRow tableRow = new TableRow();

            tableRow.CssClass = "tableRow";//Call css from module

            TableCell tableCell = new TableCell();

            tableCell.Text = "Your name";

            tableRow.Cells.Add(tableCell);

            tableCell = new TableCell();

            tableCell.Text = "Email";

            tableRow.Cells.Add(tableCell);

            tableCell = new TableCell();

            tableCell.Text = "Phone number";

            tableRow.Cells.Add(tableCell);

            table.Rows.Add(tableRow);

            //The second row

            tableRow = new TableRow();

            tableCell = new TableCell();

            tableCell.Text = "Do Quoc Hung";

            tableRow.Cells.Add(tableCell);

            tableCell = new TableCell();

            tableCell.Text = "quochung211187@gmail.com";

            tableRow.Cells.Add(tableCell);

            tableCell = new TableCell();

            tableCell.Text = "0909263861";

            tableRow.Cells.Add(tableCell);

            table.Rows.Add(tableRow);

            this.Controls.Add(table);

        }

    }

}

Step 14: before build, you test file: don’t appear file in Folder Debug ?

Step 15: Build Project

Step 16: After Build, you see appear 2 file below

Step 17: Then Package Project

Step 18: Appear Error because path with length more 248 character (if error)

Step 19: Right click project | Properties | Edit Assembly name and Default namespace

Step 20: Edit to ApplyCss for Assembly name and Default namespace

Step 21: Rebuild project

Step 22: Delete two old file below (if true)

Step 23: Package project

Step 24: Result, file .wsp created

Step 25: Open Site | Site Action | Site Setting 

Step 26: Click Solution link

Step 27: Click Icon Upload Solution

Step 28: Choose file .wsp in your  folder bin\debug

Step 29: Click Ok | click Icon Active

Step 30: Add Web Part – Click Site Action | Edit Page

Step 31: Click Tab Insert | choose Web Part

Step 32: in Categories Web Part | Choose Category  Custom | Choose your file .WSP and click Add

Step 33: Click tab Page | Click Icon Stop Editing

Step 34: Result below but css don’t Apply

Step 35: you can test file Sample.css when you register in Element.xml of Module below and result you see file is exist

Step 36: Reason css don’t apply because css do not register, you paste code below to your Web Part

      //Register to file css

      Literal literalCss = new Literal();

      this.Controls.Add(literalCss);

      literalCss.Text = "<link rel='stylesheet' type='text/css' href='/_catalogs/masterpage/Sample.css'/>";

Step 37: Rebuild project and build project and package project again, then Deactive WSP | choose you .wsp file and click icon Deactive

Step 38: Poupup appear, you click Deactive Icon

Step 39: Result below, Css is apply to table…